CODEWITHSUNDEEP
htmlcssformsinput
Dtrav
Dtrav

Reputation: 417

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!

Upvotes: 21

Views: 50557

Answers (8)

Souvik Mukherjee
Souvik Mukherjee

Reputation: 11

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

Upvotes: 1

Jamar McFarlin
Jamar McFarlin

Reputation: 11

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>

Upvotes: 1

Durlabha Deshmukh
Durlabha Deshmukh

Reputation: 1

<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

Upvotes: 0

Manish
Manish

Reputation: 5066

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

Upvotes: 23

Matteo Tommasi
Matteo Tommasi

Reputation: 76

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>

Upvotes: 1

layz53
layz53

Reputation: 119

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>

Upvotes: 11

mam79
mam79

Reputation: 13

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>

Upvotes: 1

AzizStark
AzizStark

Reputation: 1504

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>

Upvotes: 16

Related Questions