Вы наверное много раз обращали внимание на подсказки в полях, которые исчезают при нажатии на поле и наборе текста. В нашей форме будет использован другой приём. При наборе текста, подсказка будет не исчезать, а плавно отодвигаться вверх.
Реализовать такой эффект можно не прибегая к JavaScript, с помощью только одного CSS.
Структура формы входа, от стандартной, будет отличаться не сильно:
Главное отличие, это добавление в поле подсказки (placeholder). Написанная в нём подсказка будет показана в спокойном состоянии, при активации поля показывается текст в
CSS формы:
Посмотреть работу можно здесь:
IE до 10 версии не поддерживает атрибут
Реализовать такой эффект можно не прибегая к JavaScript, с помощью только одного CSS.
Структура формы входа, от стандартной, будет отличаться не сильно:
Код: Выделить всё
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" action="{S_LOGIN_ACTION}" class="floating-labels-form">
<h3>{L_LOGIN_LOGOUT}</h3>
<fieldset>
<span class="form-field">
<input required type="text" name="username" placeholder="{L_USERNAME}" />
<label for="username">{L_USERNAME}</label>
</span>
<span class="form-field">
<input required type="password" name="password" placeholder="{L_PASSWORD}" />
<label for="password">{L_PASSWORD}</label>
</span>
<span class="form-autologin">
<!-- IF S_AUTOLOGIN_ENABLED -->
<label for="autologin"><input type="checkbox" name="autologin" /> {L_LOG_ME_IN}</label>
<!-- ENDIF -->
</span>
<span class="form-links">
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED --> / <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
</span>
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
</fieldset>
</form>
<!-- ENDIF -->
<label>
и он не обязательно должен быть таким же.CSS формы:
Код: Выделить всё
/* Form label design */
.form-field {
background-color: white;
position: relative;
width: 48%;
display: block;
float: left;
margin: 5px 1%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.form-field label {
font-size: 1.1em;
position: absolute;
left: 0.35em;
top: 0;
color: gray;
opacity: 1;
transition: opacity 200ms, top 200ms, color 200ms;
-moz-transition: opacity 200ms, top 200ms, color 200ms;
-o-transition: opacity 200ms, top 200ms, color 200ms;
-webkit-transition: opacity 200ms, top 200ms, color 200ms;
}
.form-field input:required, .form-field input:invalid {
border: none;
outline: none;
}
:-moz-submit-invalid { box-shadow: none; }
:-moz-ui-invalid { box-shadow: none; }
.form-field input, .form-field select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: none;
display: block;
width: 100%;
padding: 1.0em;
padding-top: 1.15em;
background-color: transparent;
font-size: 1.2em;
cursor: auto;
}
.form-field select {
padding-right: 0.07em;
}
.form-field input:invalid ~ label {
top: 1.3em;
left: 1em;
opacity: 0;
z-index: -1;
}
.form-field input:focus ~ label, .form-field select:focus ~ label {
color: #0D7EFF;
}
.form-autologin {
display: block;
margin: 5px 1%;
clear: both;
}
.form-links {
font-style: italic;
font-size: 11px;
padding: 8px 1%;
float: left;
}
.floating-labels-form h3 {
border-bottom-color: #BDBDBD;
color: #3C73A7;
font-size: 1.4em;
margin: 5px 1%;
padding-bottom: 5px;
}
.floating-labels-form input.button2 {
float: right;
margin-right: 1%;
padding: 7px 15px;
background: #6BB2F5;
border: 1px solid #6BB2F5;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-size: 12px;
}
.floating-labels-form input.button2:hover {
background: #2792F7;
border: 1px solid #2792F7;
}
placeholder
. В нём подсказка будет видна сразу в верхней части поля.Комментарии: 1
- JuDo
- Сообщения: 3
- Зарегистрирован: 25 апр 2014, 01:12
- Настроение:
- Пол: Муж
- Имя: Рафаэль
спс
Похожие темы
-
Добрый вечер.
Некоторое время назад вы сделали мне расширение для вставки плейлистов.
Всё работает как надо. Но хотелось бы что бы вместо текста -...