Skip to content

Commit 2d00190

Browse files
author
Adam Culpepper
committed
Adding in support for longer label text
1 parent a173ba8 commit 2d00190

File tree

1 file changed

+10
-11
lines changed

1 file changed

+10
-11
lines changed

float-labels.css

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
pure-css-float-labels v1.5
2+
pure-css-float-labels v1.6
33
by Adam Culpepper | @adamculpepper
44
https://github.com/adamculpepper/pure-css-float-labels
55
*/
@@ -8,12 +8,16 @@ https://github.com/adamculpepper/pure-css-float-labels
88
.has-float-label label {
99
opacity:0.70;
1010
position:absolute;
11-
left:0.85rem;
1211
top:0.20rem;
12+
width:100%;
1313
font-size:0.75rem;
1414
transition:all 0.30s;
1515
color:blue;
1616
margin-bottom:0;
17+
padding-left:0.85rem;
18+
overflow:hidden;
19+
white-space:nowrap;
20+
text-overflow:ellipsis;
1721
cursor:text;
1822
pointer-events:none;
1923
-webkit-touch-callout:none; /* iOS Safari */
@@ -28,22 +32,17 @@ https://github.com/adamculpepper/pure-css-float-labels
2832

2933
/* :disabled and :readonly styles */
3034
.has-float-label .form-control:read-only,
31-
.has-float-label .form-control[disabled],
32-
.has-float-label .form-control[disabled] + label {opacity:0.5;}
35+
.has-float-label .form-control:disabled,
36+
.has-float-label .form-control:disabled + label {opacity:0.5;}
3337

3438
/* Textarea elements*/
3539
.has-float-label textarea.form-control:placeholder-shown:not(:focus) + label {top:1.5rem;}
3640

3741
/* Select elements*/
3842
.has-float-label select.form-control {padding-left:0.50rem;}
3943
.has-float-label select.form-control:placeholder-shown:not(:focus) + label {top:1.5rem;}
40-
.has-float-label select.form-control option[selected]:read-only,
41-
.has-float-label select.form-control option[selected][disabled] {display:none;}
42-
.has-float-label select.form-control option[disabled] {opacity:0.5!important; color:red;}
43-
44-
45-
[disabled]:hover {cursor:not-allowed;}
46-
44+
.has-float-label select.form-control option[value=""]:read-only,
45+
.has-float-label select.form-control option[value=""]:disabled {display:none;}
4746

4847
/* Hide placeholders since we're taking care of those with label elements */
4948
.has-float-label ::-webkit-input-placeholder {color:transparent!important;}

0 commit comments

Comments
 (0)