Skip to content

Commit 4adcb94

Browse files
author
Adam Culpepper
committed
Adding in [required] attribute support and adding a more contextual style to the [disabled] and :readonly elements
1 parent e5f14f7 commit 4adcb94

File tree

2 files changed

+318
-7
lines changed

2 files changed

+318
-7
lines changed

‎docs/index.html

Lines changed: 301 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<div class="col-12 py-3">
5959
<div class="row">
6060
<div class="col-lg-9">
61-
<h1>Pure CSS Float Labels<span class="h5 ml-2">v1.7</span></h1>
61+
<h1>Pure CSS Float Labels<span class="h5 ml-2">v1.8</span></h1>
6262
<h2 class="h4">Pure CSS Float Labels for Bootstrap4 (with Select2 support)</h2>
6363
</div>
6464
<div class="col-lg-3 d-block d-lg-flex align-items-center mt-4 mt-lg-0">
@@ -171,8 +171,6 @@ <h2>Demos</h2>
171171
</div>
172172
</div>
173173

174-
175-
176174
<div class="row">
177175
<div class="col-12">
178176
<h2>Tests</h2>
@@ -236,6 +234,54 @@ <h2>Tests</h2>
236234
</div>
237235
</div>
238236

237+
<div class="col-2">
238+
<div class="form-group">
239+
<div class="has-float-label">
240+
<input type="text" id="type-text-required1" class="form-control" placeholder="." required>
241+
<label for="type-text-required1">Input field (required)</label>
242+
</div>
243+
</div>
244+
</div>
245+
<div class="col-2">
246+
<div class="form-group">
247+
<div class="has-float-label">
248+
<input type="text" id="type-text-required2" class="form-control" placeholder="." required disabled>
249+
<label for="type-text-required2">Input field (required)</label>
250+
</div>
251+
</div>
252+
</div>
253+
<div class="col-2">
254+
<div class="form-group">
255+
<div class="has-float-label">
256+
<input type="text" id="type-text-required3" class="form-control" placeholder="." required readonly>
257+
<label for="type-text-required3">Input field (required)</label>
258+
</div>
259+
</div>
260+
</div>
261+
<div class="col-2">
262+
<div class="form-group">
263+
<div class="has-float-label">
264+
<input type="text" id="type-text-required4" class="form-control" placeholder="." required value="Value filled out">
265+
<label for="type-text-required4">Input field (required) with value</label>
266+
</div>
267+
</div>
268+
</div>
269+
<div class="col-2">
270+
<div class="form-group">
271+
<div class="has-float-label">
272+
<input type="text" id="type-text-required5" class="form-control" placeholder="." required value="Value filled out" disabled>
273+
<label for="type-text-required5">Input field (required) with value</label>
274+
</div>
275+
</div>
276+
</div>
277+
<div class="col-2">
278+
<div class="form-group">
279+
<div class="has-float-label">
280+
<input type="text" id="type-text-required6" class="form-control" placeholder="." required value="Value filled out" readonly>
281+
<label for="type-text-required6">Input field (required) with value</label>
282+
</div>
283+
</div>
284+
</div>
239285

240286
<div class="col-2">
241287
<div class="form-group">
@@ -261,7 +307,6 @@ <h2>Tests</h2>
261307
</div>
262308
</div>
263309
</div>
264-
265310
<div class="col-2">
266311
<div class="form-group">
267312
<div class="has-float-label">
@@ -287,6 +332,55 @@ <h2>Tests</h2>
287332
</div>
288333
</div>
289334

335+
<div class="col-2">
336+
<div class="form-group">
337+
<div class="has-float-label">
338+
<textarea id="textarea-element-required1" class="form-control" placeholder="." required rows="3"></textarea>
339+
<label for="textarea-element-required1">Textarea (required)</label>
340+
</div>
341+
</div>
342+
</div>
343+
<div class="col-2">
344+
<div class="form-group">
345+
<div class="has-float-label">
346+
<textarea id="textarea-element-required2" class="form-control" placeholder="." required rows="3" disabled></textarea>
347+
<label for="textarea-element-required2">Textarea (required)</label>
348+
</div>
349+
</div>
350+
</div>
351+
<div class="col-2">
352+
<div class="form-group">
353+
<div class="has-float-label">
354+
<textarea id="textarea-element-required3" class="form-control" placeholder="." required rows="3" readonly></textarea>
355+
<label for="textarea-element-required3">Textarea (required)</label>
356+
</div>
357+
</div>
358+
</div>
359+
<div class="col-2">
360+
<div class="form-group">
361+
<div class="has-float-label">
362+
<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>
363+
<label for="textarea-element-required4">Textarea (required) with value</label>
364+
</div>
365+
</div>
366+
</div>
367+
<div class="col-2">
368+
<div class="form-group">
369+
<div class="has-float-label">
370+
<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>
371+
<label for="textarea-element-required5">Textarea (required) with value</label>
372+
</div>
373+
</div>
374+
</div>
375+
<div class="col-2">
376+
<div class="form-group">
377+
<div class="has-float-label">
378+
<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>
379+
<label for="textarea-element-required6">Textarea (required) with value</label>
380+
</div>
381+
</div>
382+
</div>
383+
290384
<div class="col-2">
291385
<div class="form-group">
292386
<div class="has-float-label">
@@ -452,6 +546,73 @@ <h2>Tests</h2>
452546
</div>
453547
<div class="col-2 text-muted">deprecated</div>
454548

549+
<div class="col-2">
550+
<div class="form-group">
551+
<div class="has-float-label">
552+
<select class="form-control" id="select-element-required1" required>
553+
<option value="1">Web Designer</option>
554+
<option value="2">UX Designer</option>
555+
<option value="3">Web Developer</option>
556+
<option value="4">UI Developer</option>
557+
<option value="5">Backend Developer</option>
558+
<option value="6">QA Tester</option>
559+
<option value="7">Project Manager</option>
560+
</select>
561+
<label for="select-element-required1">Department</label>
562+
</div>
563+
</div>
564+
</div>
565+
<div class="col-2">
566+
<div class="form-group">
567+
<div class="has-float-label">
568+
<select class="form-control" id="select-element-required2" required disabled>
569+
<option value="1">Web Designer</option>
570+
<option value="2">UX Designer</option>
571+
<option value="3">Web Developer</option>
572+
<option value="4">UI Developer</option>
573+
<option value="5">Backend Developer</option>
574+
<option value="6">QA Tester</option>
575+
<option value="7">Project Manager</option>
576+
</select>
577+
<label for="select-element-required2">Department</label>
578+
</div>
579+
</div>
580+
</div>
581+
<div class="col-2 text-muted">deprecated</div>
582+
<div class="col-2">
583+
<div class="form-group">
584+
<div class="has-float-label">
585+
<select class="form-control" id="select-element-required4" required>
586+
<option value="1">Web Designer</option>
587+
<option value="2">UX Designer</option>
588+
<option value="3">Web Developer</option>
589+
<option value="4" selected>UI Developer</option>
590+
<option value="5">Backend Developer</option>
591+
<option value="6">QA Tester</option>
592+
<option value="7">Project Manager</option>
593+
</select>
594+
<label for="select-element-required4">Department</label>
595+
</div>
596+
</div>
597+
</div>
598+
<div class="col-2">
599+
<div class="form-group">
600+
<div class="has-float-label">
601+
<select class="form-control" id="select-element-required5" required disabled>
602+
<option value="1">Web Designer</option>
603+
<option value="2">UX Designer</option>
604+
<option value="3">Web Developer</option>
605+
<option value="4" selected>UI Developer</option>
606+
<option value="5">Backend Developer</option>
607+
<option value="6">QA Tester</option>
608+
<option value="7">Project Manager</option>
609+
</select>
610+
<label for="select-element-required5">Department</label>
611+
</div>
612+
</div>
613+
</div>
614+
<div class="col-2 text-muted">deprecated</div>
615+
455616
<div class="col-2">
456617
<div class="form-group">
457618
<div class="has-float-label">
@@ -519,6 +680,73 @@ <h2>Tests</h2>
519680
</div>
520681
<div class="col-2 text-muted">deprecated</div>
521682

683+
<div class="col-2">
684+
<div class="form-group">
685+
<div class="has-float-label">
686+
<select class="form-control select2" id="select2-element-required1" required>
687+
<option value="1">Web Designer</option>
688+
<option value="2">UX Designer</option>
689+
<option value="3">Web Developer</option>
690+
<option value="4">UI Developer</option>
691+
<option value="5">Backend Developer</option>
692+
<option value="6">QA Tester</option>
693+
<option value="7">Project Manager</option>
694+
</select>
695+
<label for="select2-element-required1">Department</label>
696+
</div>
697+
</div>
698+
</div>
699+
<div class="col-2">
700+
<div class="form-group">
701+
<div class="has-float-label">
702+
<select class="form-control select2" id="select2-element-required2" required disabled>
703+
<option value="1">Web Designer</option>
704+
<option value="2">UX Designer</option>
705+
<option value="3">Web Developer</option>
706+
<option value="4">UI Developer</option>
707+
<option value="5">Backend Developer</option>
708+
<option value="6">QA Tester</option>
709+
<option value="7">Project Manager</option>
710+
</select>
711+
<label for="select2-element-required2">Department</label>
712+
</div>
713+
</div>
714+
</div>
715+
<div class="col-2 text-muted">deprecated</div>
716+
<div class="col-2">
717+
<div class="form-group">
718+
<div class="has-float-label">
719+
<select class="form-control select2" id="select2-element-required4" required>
720+
<option value="1">Web Designer</option>
721+
<option value="2">UX Designer</option>
722+
<option value="3">Web Developer</option>
723+
<option value="4" selected>UI Developer</option>
724+
<option value="5">Backend Developer</option>
725+
<option value="6">QA Tester</option>
726+
<option value="7">Project Manager</option>
727+
</select>
728+
<label for="select2-element-required4">Department</label>
729+
</div>
730+
</div>
731+
</div>
732+
<div class="col-2">
733+
<div class="form-group">
734+
<div class="has-float-label">
735+
<select class="form-control select2" id="select2-element-required5" required disabled>
736+
<option value="1">Web Designer</option>
737+
<option value="2">UX Designer</option>
738+
<option value="3">Web Developer</option>
739+
<option value="4" selected>UI Developer</option>
740+
<option value="5">Backend Developer</option>
741+
<option value="6">QA Tester</option>
742+
<option value="7">Project Manager</option>
743+
</select>
744+
<label for="select2-element-required5">Department</label>
745+
</div>
746+
</div>
747+
</div>
748+
<div class="col-2 text-muted">deprecated</div>
749+
522750
<div class="col-2">
523751
<div class="form-group">
524752
<div class="has-float-label">
@@ -585,6 +813,75 @@ <h2>Tests</h2>
585813
</div>
586814
</div>
587815
<div class="col-2 text-muted">deprecated</div>
816+
817+
<div class="col-2">
818+
<div class="form-group">
819+
<div class="has-float-label">
820+
<select class="form-control" id="select-element-multiple-required1" size="4" required multiple>
821+
<option value="1">Web Designer</option>
822+
<option value="2">UX Designer</option>
823+
<option value="3">Web Developer</option>
824+
<option value="4">UI Developer</option>
825+
<option value="5">Backend Developer</option>
826+
<option value="6">QA Tester</option>
827+
<option value="7">Project Manager</option>
828+
</select>
829+
<label for="select-element-multiple-required1">Department</label>
830+
</div>
831+
</div>
832+
</div>
833+
<div class="col-2">
834+
<div class="form-group">
835+
<div class="has-float-label">
836+
<select class="form-control" id="select-element-multiple-required2" size="4" required multiple disabled>
837+
<option value="1">Web Designer</option>
838+
<option value="2">UX Designer</option>
839+
<option value="3">Web Developer</option>
840+
<option value="4">UI Developer</option>
841+
<option value="5">Backend Developer</option>
842+
<option value="6">QA Tester</option>
843+
<option value="7">Project Manager</option>
844+
</select>
845+
<label for="select-element-multiple-required2">Department</label>
846+
</div>
847+
</div>
848+
</div>
849+
<div class="col-2 text-muted">deprecated</div>
850+
<div class="col-2">
851+
<div class="form-group">
852+
<div class="has-float-label">
853+
<select class="form-control" id="select-element-multiple-required4" size="4" required multiple>
854+
<option value="1" selected>Web Designer</option>
855+
<option value="2">UX Designer</option>
856+
<option value="3" selected>Web Developer</option>
857+
<option value="4">UI Developer</option>
858+
<option value="5">Backend Developer</option>
859+
<option value="6">QA Tester</option>
860+
<option value="7">Project Manager</option>
861+
</select>
862+
<label for="select-element-multiple-required4">Department</label>
863+
</div>
864+
</div>
865+
</div>
866+
<div class="col-2">
867+
<div class="form-group">
868+
<div class="has-float-label">
869+
<select class="form-control" id="select-element-multiple-required5" size="4" required multiple disabled>
870+
<option value="1" selected>Web Designer</option>
871+
<option value="2">UX Designer</option>
872+
<option value="3" selected>Web Developer</option>
873+
<option value="4">UI Developer</option>
874+
<option value="5">Backend Developer</option>
875+
<option value="6">QA Tester</option>
876+
<option value="7">Project Manager</option>
877+
</select>
878+
<label for="select-element-multiple-required5">Department</label>
879+
</div>
880+
</div>
881+
</div>
882+
<div class="col-2 text-muted">deprecated</div>
883+
884+
588885
</div>
589886
</div>
590887

‎float-labels.css

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ https://github.com/adamculpepper/pure-css-float-labels
3535
/* :disabled and :readonly styles */
3636
.has-float-label .form-control[readonly],
3737
.has-float-label .form-control:disabled,
38-
.has-float-label .form-control:disabled + label {opacity:0.5;}
38+
.has-float-label .form-control:disabled + label {opacity:0.5; cursor:not-allowed;}
3939

4040
/* Textarea + select (multiple) elements */
4141
.has-float-label textarea.form-control,
@@ -76,9 +76,23 @@ https://github.com/adamculpepper/pure-css-float-labels
7676
.has-float-label textarea.form-control[placeholder = ''] + label:after,
7777
.has-float-label textarea.form-control:not([placeholder]) + label:after {margin-left:10px; color:red;}
7878
.has-float-label input.form-control[placeholder = ''] + label:after,
79-
.has-float-label input.form-control:not([placeholder]) + label:after {content:'input placeholder missing!';}
79+
.has-float-label input.form-control:not([placeholder]) + label:after,
8080
.has-float-label textarea.form-control[placeholder = ''] + label:after,
81-
.has-float-label textarea.form-control:not([placeholder]) + label:after {content:'textarea placeholder missing!';}
81+
.has-float-label textarea.form-control:not([placeholder]) + label:after {content:'placeholder missing!';}
82+
83+
/* [required] attribute based required field indicators */
84+
.has-float-label .form-control[required] + label:after,
85+
.has-float-label .form-control[required] + .select2 + label:after {
86+
content:'*';
87+
font-size:0.8rem;
88+
position:absolute;
89+
top:50%;
90+
transform:translateY(-50%);
91+
height:100%;
92+
margin-left:5px;
93+
transition:all 300ms;
94+
}
95+
.has-float-label .form-control[required]:placeholder-shown:not(:focus) + label:after {font-size:1rem;}
8296

8397
/* ------------------------------ */
8498

0 commit comments

Comments
 (0)