Skip to content

Commit

Permalink
Adding in [required] attribute support and adding a more contextual s…
Browse files Browse the repository at this point in the history 
…tyle to the [disabled] and :readonly elements
  • Loading branch information
Adam Culpepper committed Mar 26, 2020
1 parent e5f14f7 commit 4adcb94
Show file tree
Hide file tree
Showing 2 changed files with 318 additions and 7 deletions.
305 changes: 301 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<div class="col-12 py-3">
<div class="row">
<div class="col-lg-9">
<h1>Pure CSS Float Labels<span class="h5 ml-2">v1.7</span></h1>
<h1>Pure CSS Float Labels<span class="h5 ml-2">v1.8</span></h1>
<h2 class="h4">Pure CSS Float Labels for Bootstrap4 (with Select2 support)</h2>
</div>
<div class="col-lg-3 d-block d-lg-flex align-items-center mt-4 mt-lg-0">
Expand Down Expand Up @@ -171,8 +171,6 @@ <h2>Demos</h2>
</div>
</div>



<div class="row">
<div class="col-12">
<h2>Tests</h2>
Expand Down Expand Up @@ -236,6 +234,54 @@ <h2>Tests</h2>
</div>
</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<input type="text" id="type-text-required1" class="form-control" placeholder="." required>
<label for="type-text-required1">Input field (required)</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<input type="text" id="type-text-required2" class="form-control" placeholder="." required disabled>
<label for="type-text-required2">Input field (required)</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<input type="text" id="type-text-required3" class="form-control" placeholder="." required readonly>
<label for="type-text-required3">Input field (required)</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<input type="text" id="type-text-required4" class="form-control" placeholder="." required value="Value filled out">
<label for="type-text-required4">Input field (required) with value</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<input type="text" id="type-text-required5" class="form-control" placeholder="." required value="Value filled out" disabled>
<label for="type-text-required5">Input field (required) with value</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<input type="text" id="type-text-required6" class="form-control" placeholder="." required value="Value filled out" readonly>
<label for="type-text-required6">Input field (required) with value</label>
</div>
</div>
</div>

<div class="col-2">
<div class="form-group">
Expand All @@ -261,7 +307,6 @@ <h2>Tests</h2>
</div>
</div>
</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
Expand All @@ -287,6 +332,55 @@ <h2>Tests</h2>
</div>
</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<textarea id="textarea-element-required1" class="form-control" placeholder="." required rows="3"></textarea>
<label for="textarea-element-required1">Textarea (required)</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<textarea id="textarea-element-required2" class="form-control" placeholder="." required rows="3" disabled></textarea>
<label for="textarea-element-required2">Textarea (required)</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<textarea id="textarea-element-required3" class="form-control" placeholder="." required rows="3" readonly></textarea>
<label for="textarea-element-required3">Textarea (required)</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<textarea id="textarea-element-required4" class="form-control" placeholder="." required rows="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus nibh, ullamcorper ut tellus scelerisque, condimentum suscipit neque. Proin feugiat ipsum eu erat mollis auctor. Sed nec risus et felis dictum semper ut vel justo. Nunc non mi eu ipsum gravida tincidunt non quis dolor. Aenean vehicula ornare arcu sit amet bibendum. Integer congue pellentesque lectus, et tincidunt tortor consequat ac. Donec tristique est iaculis congue consectetur. Nullam laoreet sagittis erat. Cras sodales lorem non ex vulputate, vel egestas lectus volutpat. Ut consequat hendrerit dolor eu condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</textarea>
<label for="textarea-element-required4">Textarea (required) with value</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<textarea id="textarea-element-required5" class="form-control" placeholder="." required rows="3" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus nibh, ullamcorper ut tellus scelerisque, condimentum suscipit neque. Proin feugiat ipsum eu erat mollis auctor. Sed nec risus et felis dictum semper ut vel justo. Nunc non mi eu ipsum gravida tincidunt non quis dolor. Aenean vehicula ornare arcu sit amet bibendum. Integer congue pellentesque lectus, et tincidunt tortor consequat ac. Donec tristique est iaculis congue consectetur. Nullam laoreet sagittis erat. Cras sodales lorem non ex vulputate, vel egestas lectus volutpat. Ut consequat hendrerit dolor eu condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</textarea>
<label for="textarea-element-required5">Textarea (required) with value</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<textarea id="textarea-element-required6" class="form-control" placeholder="." required rows="3" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus nibh, ullamcorper ut tellus scelerisque, condimentum suscipit neque. Proin feugiat ipsum eu erat mollis auctor. Sed nec risus et felis dictum semper ut vel justo. Nunc non mi eu ipsum gravida tincidunt non quis dolor. Aenean vehicula ornare arcu sit amet bibendum. Integer congue pellentesque lectus, et tincidunt tortor consequat ac. Donec tristique est iaculis congue consectetur. Nullam laoreet sagittis erat. Cras sodales lorem non ex vulputate, vel egestas lectus volutpat. Ut consequat hendrerit dolor eu condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</textarea>
<label for="textarea-element-required6">Textarea (required) with value</label>
</div>
</div>
</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
Expand Down Expand Up @@ -452,6 +546,73 @@ <h2>Tests</h2>
</div>
<div class="col-2 text-muted">deprecated</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-required1" required>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-required1">Department</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-required2" required disabled>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-required2">Department</label>
</div>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-required4" required>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4" selected>UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-required4">Department</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-required5" required disabled>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4" selected>UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-required5">Department</label>
</div>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
Expand Down Expand Up @@ -519,6 +680,73 @@ <h2>Tests</h2>
</div>
<div class="col-2 text-muted">deprecated</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control select2" id="select2-element-required1" required>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select2-element-required1">Department</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control select2" id="select2-element-required2" required disabled>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select2-element-required2">Department</label>
</div>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control select2" id="select2-element-required4" required>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4" selected>UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select2-element-required4">Department</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control select2" id="select2-element-required5" required disabled>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4" selected>UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select2-element-required5">Department</label>
</div>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
Expand Down Expand Up @@ -585,6 +813,75 @@ <h2>Tests</h2>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>

<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-multiple-required1" size="4" required multiple>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-multiple-required1">Department</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-multiple-required2" size="4" required multiple disabled>
<option value="1">Web Designer</option>
<option value="2">UX Designer</option>
<option value="3">Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-multiple-required2">Department</label>
</div>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-multiple-required4" size="4" required multiple>
<option value="1" selected>Web Designer</option>
<option value="2">UX Designer</option>
<option value="3" selected>Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-multiple-required4">Department</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group">
<div class="has-float-label">
<select class="form-control" id="select-element-multiple-required5" size="4" required multiple disabled>
<option value="1" selected>Web Designer</option>
<option value="2">UX Designer</option>
<option value="3" selected>Web Developer</option>
<option value="4">UI Developer</option>
<option value="5">Backend Developer</option>
<option value="6">QA Tester</option>
<option value="7">Project Manager</option>
</select>
<label for="select-element-multiple-required5">Department</label>
</div>
</div>
</div>
<div class="col-2 text-muted">deprecated</div>


</div>
</div>

Expand Down
20 changes: 17 additions & 3 deletions float-labels.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ https://github.com/adamculpepper/pure-css-float-labels
/* :disabled and :readonly styles */
.has-float-label .form-control[readonly],
.has-float-label .form-control:disabled,
.has-float-label .form-control:disabled + label {opacity:0.5;}
.has-float-label .form-control:disabled + label {opacity:0.5; cursor:not-allowed;}

/* Textarea + select (multiple) elements */
.has-float-label textarea.form-control,
Expand Down Expand Up @@ -76,9 +76,23 @@ https://github.com/adamculpepper/pure-css-float-labels
.has-float-label textarea.form-control[placeholder = ''] + label:after,
.has-float-label textarea.form-control:not([placeholder]) + label:after {margin-left:10px; color:red;}
.has-float-label input.form-control[placeholder = ''] + label:after,
.has-float-label input.form-control:not([placeholder]) + label:after {content:'input placeholder missing!';}
.has-float-label input.form-control:not([placeholder]) + label:after,
.has-float-label textarea.form-control[placeholder = ''] + label:after,
.has-float-label textarea.form-control:not([placeholder]) + label:after {content:'textarea placeholder missing!';}
.has-float-label textarea.form-control:not([placeholder]) + label:after {content:'placeholder missing!';}

/* [required] attribute based required field indicators */
.has-float-label .form-control[required] + label:after,
.has-float-label .form-control[required] + .select2 + label:after {
content:'*';
font-size:0.8rem;
position:absolute;
top:50%;
transform:translateY(-50%);
height:100%;
margin-left:5px;
transition:all 300ms;
}
.has-float-label .form-control[required]:placeholder-shown:not(:focus) + label:after {font-size:1rem;}

/* ------------------------------ */

Expand Down

0 comments on commit 4adcb94

Please sign in to comment.