CODEWITHSUNDEEP
htmlcss
parth agrawal
parth agrawal

Reputation: 85

how to place label on top left corner of input field in html/css

Please refer the image below for reference. I want a similar kind of form with label being placed on top of input field in top left corner.

Img:

enter image description here

Thanks in advance!

--- update ---

I tried and i was able to place label separately on top of the input field and was unable to merge it.

this is how it looks currently:

enter image description here

<div class="form-group mt10">
            <label for="inputName">Name <span class="reqField">*</span></label>
            <input required type="text" class="form-control" id="inputName" placeholder="Name">
        </div>
        <div class="form-group">
            <label for="inputCountry">Country</label>
            <input type="text" class="form-control" id="inputCountry" placeholder="Country">
        </div>

Upvotes: 2

Views: 8572

Answers (4)

Alvison Hunter
Alvison Hunter

Reputation: 673

I think what you are looking for is something similar to this.

.custom_badge {
     width:80px;
     height:30px;
     position:absolute;
     margin-top: -15px;
     border-radius:12px;
     -webkit-border-radius:12px;
     background:#708090;
     color:white;
     text-align:center;
     vertical-align:bottom;
     font-size:14px;
     font-style: normal;
     font-weight: 400;
     font-family: arial,sans-serif;
     margin-left: 10px;
     padding-top:3px;
}
 .custom_input {
     border: none !important;
     border:solid 1px #708090 !important;
     border-radius:12px !important;
     -webkit-border-radius:12px !important;
     width:350px !important;
     text-align: end !important;
     color:#54606C !important;
}
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head>

<body class="app-body">
    <h5 class="lead small mx-2 text-info text-uppercase my-4">Rounded label on input field | Demo Code</h5>
    <div class="form-group mx-2">
        <label class="align-middle custom_badge" for="inputName">Name <span class="reqField">*</span> </label>
        <input required type="text" class="form-control custom_input" id="inputName"> </div>
    <div class="form-group mx-2 my-4">
        <label class="align-middle custom_badge" for="inputCountry">Country </label>
        <input type="text" class="form-control custom_input" id="inputCountry"> </div>
</body>

Upvotes: 0

MD Al-Amin Bin Alim
MD Al-Amin Bin Alim

Reputation: 1

Just use the <p> tag before the <input> tag. It's that easy.

<p>Name:</p>
<input type="text">

Upvotes: -1

Andrei Krotkov
Andrei Krotkov

Reputation: 5684

How are people forgetting the good ol' fieldset element?

No CSS or JS necessary.

<fieldset>
  <legend>Title</legend>
  Element
</fieldset>

Upvotes: 3

Nitheesh
Nitheesh

Reputation: 19986

Something like this will help.

body.app-body {
    background: #cecece;
}
.form-group {
    border: 2px solid;
    margin: 10px;
    border-radius: 15px;
    margin-top: 20px;
}

.form-group>label {
    position: absolute;
    top: 6px;
    left: 20px;
    padding: 5px 10px;
    border-radius: 15px;
    background: #fff;
}

.form-group>input {
    border: none;
    background: transparent;
}
<body class="app-body">
    <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>
</body>

Upvotes: 0

Related Questions