segFault segFault - 4 years ago 106
HTML Question

Floating label styling

I am using the CSS found here to make floating form labels. I chose this styling because there is no JavaScript needed and the HTML markup is simple enough (i.e. a

div
with a class and then only a
label
and
input
tag). If there are other simple style sheets available please let me know.

I am a backend developer and I suck at CSS and cannot figure out how to adjust this CSS so it looks nice when:


  • There is a select tag (
    <select/>
    instead of an
    <input/>
    tag)

  • When the background is not white



Any help will be greatly appreciated!

<form class="float-label" spellcheck="false">
<legend>Float Label Demo</legend>

<!-- we need a wrapping element for positioning the label -->
<!-- the required attribute is ... required! -->
<div class="control">
<input type="text" name="title" placeholder="Title" required />
<!-- yes, this is not nice, in real live, do it with JS -->
<label for="title">Title</label>
</div>

<div class="control small">
<input type="text" name="price" placeholder="Price" required />
<label for="price">Price</label>
</div>
<div class="control medium">
<input type="text" name="location" placeholder="Specific location (optional)" required />
<label for="location">Specific location (optional)</label>
</div>

<div class="control">
<textarea name="description" placeholder="Description" required></textarea>
<label for="description">Description</label>
</div>

</form>


@border: 1px solid #ddd;
@padding: 10px;
@label-font-size: 13px;

*,
*:before,
*:after {
box-sizing: border-box;
}

body {
width: 100%;
min-height: 300px;
}

// Demo styles
form {
width: 600px;
margin: 2em auto;

font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 22px;

legend {
font-size: 2em;
margin-bottom: 1em;
width: 100%;
border-bottom: @border;
}
}


// float label
.float-label {
.control {
float: left;
position: relative;
width: 100%;
border-bottom: @border;
padding-top: @padding + @label-font-size;
padding-bottom: @padding;

// you proably want to replace these with your grid classes
&.small {
width: 30%;
border-right: @border;
}

&.medium {
width: 70%;
padding-left: @padding;
}

&:last-child {
border: 0;
}
}

input, textarea {
display: block;
width: 100%;
border: 0;
outline: 0;
resize: none;

// inactive but shown label (exceptions: opacity and top)
& + label {
position: absolute;
top: 10px;
transition: top 0.7s ease, opacity 0.7s ease;
opacity: 0;

// Some nice styling
font-size: @label-font-size;
font-weight: 600;
color: #ccc;
}

// THE MAGIC
// as soon as we start typing, the "required" attribute will
// set the state to valid and our pseudo selector will match
&:valid + label {
opacity: 1;
top: 3px;
}

// and we highlight the focused input label
&:focus + label {
color: #2c8efe;
}
}
}


Here is what this styling looks like when the background is black:

enter image description here

Answer Source

Have a look

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  width: 100%;
  min-height: 300px;
  background-color: #000;
}
form {
  width: 600px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
}
form legend {
  font-size: 2em;
  margin-bottom: 1em;
  width: 100%;
  border-bottom: 1px solid #333;
}
.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #333;
  padding-top: 23px;
  padding-bottom: 10px;
}
.float-label .control.small {
  width: 30%;
  border-right: 1px solid #333;
}
.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}
.float-label .control:last-child {
  border: 0;
}
.float-label select,
.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #fff;
}

.float-label select + label,
.float-label input + label,
.float-label textarea + label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}


.float-label select:focus + label,
.float-label input:valid + label,
.float-label textarea:valid + label {
  opacity: 1;
  top: 3px;
}

.float-label select:focus + label,
.float-label input:focus + label,
.float-label textarea:focus + label {
  color: #ccc;
}
option{color:#000;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    
-webkit-box-shadow: 0 0 0 1000px #000 inset !important; 
    -webkit-text-fill-color: #ccc !important;
    }
<form class="float-label" spellcheck="false">
  <legend>Float Label Demo</legend>
  
  <!-- we need a wrapping element for positioning the label -->
  <!-- the required attribute is ... required! -->
  <div class="control">
    <input type="text" name="title" placeholder="Title" required />
    <!-- yes, this is not nice, in real live, do it with JS -->
    <label for="title">Title</label>
  </div>
 
  <div class="control small">
    <input type="text" name="price" placeholder="Price" required />
    <label for="price">Price</label>
  </div>
  <div class="control medium">
    <input type="text" name="location" placeholder="Specific location (optional)" required />
    <label for="location">Specific location (optional)</label>
  </div>
  
  <div class="control">
    <select>
    <option>option 1</option>
      <option>option 2</option>
    </select>
    <label for="description">Description</label>
  </div>
  
</form>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download