Menu
I have the following HTML/CSS for float labels on a form (sorry if it's a bit messy)
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form>div {
position: relative;
overflow: hidden;
}
form input {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
margin: 4px 0 4px 0px
}
form input:valid+label {
top: -7%;
z-index: 100;
font-size: 70%;
padding: 1px 6px;
}
input:valid+label>div {
padding: 2px;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form.test-form input {
padding: 12px 12px 12px 12px;
}
form.test-form label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
form.test-form input:focus+label {
top: -7%;
z-index: 100;
font-size: 70%;
padding: 1px 6px;
text-transform: uppercase;
}
.label {
background-color: white;
padding: 10px;
display: inline-block;
transition: padding 0.2s;
}
form.test-form input:focus+label>div {
padding: 2px;
}<body>
<h1>Test Form</h1>
<form class="test-form">
<div>
<input id="name" name="name" type="text" required>
<label for="name">
<div class="label">
<span class="text">Your Name</span>
</div>
</label>
</div>
</form>
</body>This is working exactly how I need it to. The only issue is that I cannot select the text in the input box after it is entered (if you try it you will notice that "YOUR NAME" is highlighted before the actual text in the input box is).
I am assuming this has something to do with the way I am setting the z-index... is there a way to edit the z-index for only the text in an input box? If not, is there an obvious solution to fix this issue?
231
You can use readonly attribute, if you want your input only to be read. And you can use disabled attribute, if you want input to be shown, but totally disabled (even processing languages like PHP wont be able to read those). Save this answer.
select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.
The select() method is used to select the content of a text field.
A text box (input box), text field or text entry box is a control element of a graphical user interface, that should enable the user to input text information to be used by a program.
Try This:
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form>div {
position: relative;
}
form input {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
margin: 4px 0 4px 0px
}
form input:valid+label { /*<--Changed*/
top: -55px;
left:10px;
z-index: 100;
font-size: 70%;
padding: 1px 6px;
position:relative;
}
input:valid+label>div {
padding: 2px;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form.test-form input {
padding: 12px 12px 12px 12px;
}
form.test-form label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
background:#FFF;
}
form.test-form input:focus+label { /*<--Changed*/
top:-55px;
left:10px;
font-size: 70%;
padding: 1px 6px;
text-transform: uppercase;
}
.label {
background-color: white;
padding: 10px;
display: inline-block;
transition: padding 0.2s;
}
form.test-form input:focus+label>div {
padding: 2px;
}
#name:focus { /*<--Added*/
z-index:1000;
}
#name:focus + label { /*<--Added*/
position:relative;
z-index:1001;
}<body>
<h1>Test Form</h1>
<form class="test-form">
<div>
<input id="name" name="name" type="text" required>
<label for="name">
<div class="label">
<span class="text">Your Name</span>
</div>
</label>
</div>
</form>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
