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

user_8255641 0
Viewed 29108

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!

forms input css html
6 Answers

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>

user_85908540

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/bootstrap@4.6.0/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>

user_148882230

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>

user_77864680

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>

user_76059860
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

user_154216790
Related