Я успешно размещал надписи над полями ввода формы, когда сфокусирован, но я в тупике о том, как держать метки плавающими, если текст вводится в поле и не сфокусирован.Как сохранить плавающие метки, плавающие после ввода. Pure CSS
В настоящее время существует множество примеров чистого CSS, но для меня нет ясного понимания того, что удерживает заполненную полевую метку плавающей. Я уверен, что это довольно легко, но я довольно новичок в этом.
EDIT: Мне нужно сделать это, не используя «необходимый» метод, упомянутый в комментариях ниже. Моя форма представляет собой комбинацию требуемых и необязательных полей.
Вот один из многих примеров, которые я нашел: http://codepen.io/atunnecliffe/pen/gpKzQw
Вот мой jsfiddle: https://jsfiddle.net/yzzxrsnn/1/
Большое спасибо заранее.
HTML:
<fieldset class="form-field">
<textarea maxlength="280" class="form-textarea"></textarea>
<label class="form-label" alt='Search Map' placeholder='Search Map'>Text Area</label>
<br>
<input type='text' class="form-input" placeholder="" onclick='this.value = "";'>
<label class="form-label" alt='Search Map' placeholder='Search Map'>Text</label>
<br>
<select class="form-input" >
<option value="" disabled selected hidden></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
<label class="form-label" for="name">Select</label>
</fieldset>
CSS:
.form-input {
box-sizing: border-box;
width: 100%;
max-width: 400px;
height: 55px;
margin: 15px 0 15px 0;
padding: 0px 10px 0px 10px;
border: 3px solid #ccc;
outline: none;
border-radius: 8px;
outline: none;
resize: none;
text-align:left;
-webkit-appearance: none;
background: transparent;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #000;
background:#fff;
font-size: 18px;
-webkit-transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
}
.form-input:focus {
border-color: #00bafa;
}
.form-input + .form-label {
display: block;
pointer-events: none;
margin: 0 0 0 15px;
line-height: 0px;
margin-top: -43px;
margin-bottom: 43px;
transition: transform 1s;
}
.form-label {
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #ccc;
font-size: 18px;
}
.form-input:focus + .form-label {
transform: translateY(-38px);
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #00bafa;
font-size: 18px;
}
.form-textarea {
box-sizing: border-box;
width: 100%;
max-width: 400px;
height: 150px;
margin: 15px 0 15px 0;
padding: 15px 10px 0px 10px;
border: 3px solid #ccc;
border-radius: 8px;
outline: none;
resize: none;
text-align:left;
-webkit-appearance: none;
background: transparent;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #000;
background:#fff;
font-size: 18px;
-webkit-transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
transition: border-color ease-in-out .5s,box-shadow ease-in-out .5s;
}
.form-textarea:focus {
border-color: #00bafa;
}
.form-textarea + .form-label {
display: block;
pointer-events: none;
margin: 0 0 0 15px;
line-height: 0px;
margin-top: -145px;
margin-bottom: 145px;
transition: transform 1s;
}
.form-textarea:focus + .form-label {
transform: translateY(-30px);
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #00bafa;
font-size: 18px;
}
.form-textarea + .form-label:before {
transform: translateY(-38px);
pointer-events: none;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
color: #00bafa;
font-size: 18px;
}
Спасибо. Теперь я понимаю, что в Pure CSS нет способа сделать это без использования атрибута «required». Я пошел этот метод. –
Рад помочь вам. – Sasith
странный предмет. Я делал изменения на сайте и удалял часть скрипта Java вашего решения при аварии, и он все еще работает. Есть ли какой-нибудь конкретный случай, когда javascript вступает в игру? –