Floating label styling - html

Question

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:

Answer 1

You've copied the Less (non-compiled CSS) which will not render properly in browsers - so if you take examples from CodePen in the future keep that in mind :)
The inputs have a transparent background, which lends itself to any background colour ( or pattern ) so if you change the background colour of the body/parent it will still look good
This might be what you're looking for:
*,
*: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;
}
<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>

Answer 2

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>

Answer 3

Add this code to your stylesheet :
.float-label select,
.float-label input,
.float-label textarea {
background: transparent;
}
And you will get the <input>, <textarea>and <select> with transparent background. So you can change the background color to the color of your choice later without any tension about form field background colors.
Thanks Nabeel

Answer 4

A simple answer is to change the background-color of the inputs directly.
Something like this;
input { background-color: blue;}
you could copy/paste that right into your CSS and use any color you want. I put this CSS into the following html code at W3schools.com and got this:
<!DOCTYPE html>
<html>
<body>
<form action="">
User name:
<br>
<style>
input {
background-color: blue;
}
</style>
<input type="text" name="userid">
<br>User password:
<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
I hope this works for you!