Placing <label> text inside the border of a text input

Asked 17/7, 2017 at 18:1 Answered 28/11, 2023 at 8:56

I'm looking get this code:

<form id="first_name">
    <div class="form-group">
         <label>First name</label>
         <input type="text" class="form-control input-lg" />
    </div>
</form>

To look like this

minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a field set but without either tags and the label inside the border of the text input. Thanks in advance!

Needful answered 17/7, 2017 at 18:1 Comment(2)

Is the background-color of the page the same as the background-color of the input? You could likely just assign the same background-color to the <label> and make use of display: block; and negative margins. – Ciao 17/7, 2017 at 18:4

Try to place the image you're referencing inside the body of the question rather than linking to it. – Bernina 17/7, 2017 at 18:5

Here is what you need. You can change the CSS values according to your need. Also important is to set the background-color of label to the same color as your form/html.

.form-group{
  padding:10px;
  border:2px solid;
  margin:10px;
}
.form-group>label{
  position:absolute;
  top:-1px;
  left:20px;
  background-color:white;
}

.form-group>input{
  border:none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
    <div class="form-group">
         <label>First name</label>
         <input type="text" class="form-control input-lg" />
    </div>
</form>

Hope this helps :).

Urtication answered 17/7, 2017 at 18:12 Comment(3)

Close but I actually need the text inside of the input in the image. If I place the text over the input and put a background color, the background gets in front of the text. If I don't put a background color, obviously the border is visible through the test. – Needful 17/7, 2017 at 18:38

Using your code. Was able to come up with a slightly better solution for me by using a very light gradient. Thanks for the help! – Needful 17/7, 2017 at 18:59

you should add position:relative in .form-group – Macaroon 2/5, 2019 at 9:5

You can use legend tag.

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Contact</legend>
  Name <input type="text"><br>
  Email <input type="text"><br>
 </fieldset>
</form>

</body>
</html>

Libb answered 22/12, 2019 at 10:18 Comment(2)

Legend is the way to go in my book. It's answers the question and is straighforward. – Neidaneidhardt 9/10, 2023 at 20:27

This is what I was looking for but couldn't remember the term! HTML native FTW. – Bigamy 29/5 at 15:7

When I look at the answers here, all of them are answered to save the moment, that is, when the background picture changes, the examples made explode, there is no such problem in my example, you can use it as you wish

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
        .textOnInput {
            position: relative;
        }
        .textOnInput label {
            position: absolute;
            top: -15px;
            left: 23px;
            padding: 2px;
            z-index: 1;
        }
        .textOnInput label:after {
            content: " ";
            background-color: #fff;
            width: 100%;
            height: 13px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
        }
        label {
            font-size: 16px;
            font-weight: 500;
            display: inline-block;
            margin-bottom: .5rem;
        }
        .form-control {
            box-shadow: none !important;

        }
    </style>

</head>

<body>
    <div class="col-md-4 mt-5">
        <div class="textOnInput">
            <label for="inputText">Email</label>
            <input class="form-control" type="text">
        </div>
    </div>
</body>

</html>

Millisent answered 26/1, 2021 at 11:4 Comment(0)

you should add position relative if you want more than one box and add some padding:

.form-group{
  padding:10px;
  border:2px solid;
  margin:10px;
}
.form-group>label{
  padding-left: 5px;
  padding-right: 5px;
  position:relative;
  top:-20px;
  left:20px;
  background-color:white;
}

.form-group>input{
  border:none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
    <div class="form-group">
         <label>First name</label>
         <input type="text" class="form-control input-lg" />
    </div>
     <div class="form-group">
         <label>Second name</label>
         <input type="text" class="form-control input-lg" />
    </div>
</form>

Ansilma answered 19/6, 2020 at 13:8 Comment(0)

you can create an input and wrap it inside a fieldset:

<fieldset>
<legend>text creator</legend>
    
<input type="text"
        id="text creator"
       class="form-control"
       name="object-creator"/> 
</fieldset>

and some basic css to remove the input border:

input {
 border:none;
  width:100%;
}
    input:focus, textarea:focus, select:focus{
        outline: none;
    }

input {
 border:none;
  width:100%;
}
    input:focus, textarea:focus, select:focus{
        outline: none;
    }

<fieldset>
<legend>text creator</legend>
    
<input type="text"
        id="text creator"
       class="form-control"
       name="object-creator"/> 
</fieldset>

Philippines answered 6/3, 2022 at 18:28 Comment(0)

This can be achieved using pure html. It happens automatically when you nest legend tags in fieldsets

<fieldset>
    <legend>Here is the legend<legend>
</fieldset>

Sialoid answered 5/1, 2023 at 5:4 Comment(0)

<fieldset>
  <legend>first name</legend>
  <input type="text" id="fname" name="fname" style="border: none; outline: none; width: 100%; font-size: 18px">
  </fieldset>

Try this. It will help you get what you are looking for with minimal coding.

Hypogynous answered 28/11, 2023 at 8:56 Comment(0)

<fieldset class="border col-12 pt-0 pb-1 mx-auto  ">
  <legend class="w-auto mb-0">First Name</legend>
  <input type="text" id="fname" name="fname" class="border-0 p-0 mx-auto pl-1" placeholder="[email protected]">
</fieldset>

if you are using bootstrap4 play with class and easily solved it its worked for me you can adjust your class like p-1,ml-2.... etc

Bobbinet answered 2/4, 2022 at 11:1 Comment(2)

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Wisent 2/4, 2022 at 15:2

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Wisent 2/4, 2022 at 17:16

Recommended topics

Hot tags