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

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

enter image description here

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!

htmlcssformsinput


Solution 1:[1]

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 :).

Solution 2:[2]

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>

Solution 3:[3]

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>

Solution 4:[4]

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>

Solution 5:[5]

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>

Solution 6:[6]

First Name

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mike Slinn
Solution 2 AzizStark
Solution 3 layz53
Solution 4 mam79
Solution 5 Matteo Tommasi
Solution 6

Related Questions