CODEWITHSUNDEEP
csshtmlforms
Miguel Borges
Miguel Borges

Reputation: 7669

Labels inside a input

How to put form labels inside a input form only on mobile?

example:

enter image description here

my code:

<form>
    <div class="form-group">
        <label class="form-control-label" for="firstName">Firstname</label>
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
    </div>
    <div class="form-group">
        <label class="form-control-label" for="lastName">Lastname</label>
        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
    </div>

    <div class="form-group">
        <label class="form-control-label" for="phone_number">Mobile Number</label>
        <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
    </div>
</form>

Upvotes: 0

Views: 9280

Answers (4)

Basj
Basj

Reputation: 46393

Inspired by another answer, here is a short way to do it:

.input-group {
    position: relative;
}
.input-label {
    position: absolute;
    top: 5px;
    left: 5px;
    color: #666;
}
.input-element {
    padding: 30px 5px 5px 5px;
}
<div class="input-group">
    <label class="input-label">First name</label>
    <input type="text" class="input-element" />
</div>

Upvotes: 2

Patrick Mlr
Patrick Mlr

Reputation: 2965

I've just added a border to form-group and overwritten some bootstrap code.

For mobile only, try to use CSS3 Media Queries.

You could try this:

.form-group {
  border: 1px solid black; /* Change border width and color here */
}

/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
  border: none !important; /* No border for input */
  box-shadow: none !important; /* No border for input */
}

.form-control:focus {
  box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <label class="form-control-label" for="firstName">Firstname</label>
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
  </div>
  <div class="form-group">
    <label class="form-control-label" for="lastName">Lastname</label>
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
  </div>

  <div class="form-group">
    <label class="form-control-label" for="phone_number">Mobile Number</label>
    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
  </div>
</form>

Upvotes: 1

Maheswaran S
Maheswaran S

Reputation: 525

You can use like the below method. We have to write mobile screen style with in the media queries

body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}

@media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;

}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>

Upvotes: 2

Gerard
Gerard

Reputation: 15796

Something like this? I changed the position of input and label in the HTML

.form-group {
  position: relative;
  min-height: 3.5em;
}

input.form-control {
  height: 3em;
  position: absolute;
  top: 0;
  left: 0;
}

label.form-control-label {
  position: absolute;
  font-size: .8em;
  top: 0;
  left: 5px;
  text-transform: uppercase;
}
<form>
  <div class="form-group">
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
    <label class="form-control-label" for="firstName">Firstname</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
    <label class="form-control-label" for="lastName">Lastname</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
    <label class="form-control-label" for="phone_number">Mobile Number</label>
  </div>
</form>

Upvotes: 4

Related Questions