#php #jquery #html #css
#php #jquery #HTML #css
Вопрос:
У меня есть форма регистрации, в которой у меня есть несколько полей ввода с текстом-заполнителем. У меня нет никакой метки для поля ввода, поскольку у меня есть заполнитель. Я хочу сдвигать текст-заполнитель на вверх, когда пользователь вводит текст.. Что я должен добавить в свой css-файл, чтобы это произошло.
на рисунке ниже показана моя форма регистрации
мой signup.php файл:
<div class="loginForm">
<form action="signUp.php" method="POST">
<input type="text" name="firstName" placeholder="First name" autocomplete="off" required>
<input type="text" name="lastName" placeholder="Last name" autocomplete="off" required>
<input type="text" name="username" placeholder="Username" autocomplete="off" required>
<input type="email" name="email" placeholder="Email" autocomplete="off" required>
<input type="email" name="email2" placeholder="Confirm email" autocomplete="off" required>
<input type="password" name="password" placeholder="Password" autocomplete="off" required>
<input type="password" name="password2" placeholder="Confirm password" autocomplete="off" required>
<input type="submit" name="submitButton" value="SUBMIT">
</form>
</div>
мой css-файл, который я пробовал:
.signInContainer .column form input[type="text"],
.signInContainer .column form input[type="email"],
.signInContainer .column form input[type="password"] {
font-size: 14px;
margin: 10px 0;
border: none;
border-bottom: 1px solid #dedede;
box-shadow: none;
transition: all .8s;
}
.signInContainer .column form input[type="text"]:focus,
.signInContainer .column form input[type="email"]:focus,
.signInContainer .column form input[type="password"]:focus {
outline: none;
transform: translateY(-3px);
border-bottom: 1px solid #464646;
}
Комментарии:
1. Я почти уверен, что это невозможно без javascript. Вы согласны с использованием javascript?
2. да, у меня нет проблем
3. Только что добавлено решение с использованием чистого HTML CSS (не хвастаюсь, просто привлекаю внимание к возможному решению)
4. Это можно сделать, используя только CSS, но мы немного изменили структуру, например, переместили заполнитель в метку. Вы согласны с изменениями? Спасибо
5. @HassanSiddiqui не может видеть файл, который вы изменили
Ответ №1:
CSS-решение: для этого вам понадобится label
, а также немного разметки и браузер webkit.
.container {
position: relative;
padding-top: 25px;
margin-top: 10px;
}
.input-text {
padding: 10px 5px;
}
/* the second part of the trick is that you place your label to
look like a placeholder */
label.move-out {
position: absolute;
top: 35px;
left: 15px;
color: lightgrey;
transition: top 0.4s, left 0.4s
}
/* :placeholder-shown now works with an "empty" placeholder and a
correctly positioned label, and also keeps the label at position,
when data is in the input field */
/* :-webkit-autofill is there if Chrome wants to fill your input
box automatically */
input:focus label.move-out,
input:not( :placeholder-shown) label.move-out,
input:-webkit-autofill label.move-out {
top: 0px;
left: 0px;
transition: top 0.4s, left 0.4s;
color: black;
}
<div class="container">
<!-- the first part of the trick is that you create an "empty"
placeholder attr -->
<input id="i1" class="input-text" type="text" placeholder=" " />
<label class="move-out" for="i1">Label 1</label>
</div>
<div class="container">
<!-- the first part of the trick is that you create an "empty"
placeholder attr -->
<input id="i2" class="input-text" type="text" placeholder=" " />
<label class="move-out" for="i2">Label 2</label>
</div>
Важно размещать label
ПОСЛЕ поля ввода, поскольку в CSS есть селектор для выбора элемента после другого элемента ( element element
), но нет селектора для выбора элемента перед другим.
Ответ №2:
У вас может быть пустая метка (которая не будет отображаться в отображаемом выводе, поскольку она пустая), и когда вы вводите что-либо во ввод, измените значение метки на заполнитель вашего ввода.
document.getElementById("input_text").addEventListener("keydown", function() {
document.getElementById("text").innerHTML = document.getElementById("input_text").placeholder;
});
<label id="text"></label>
<input type="text" id="input_text" placeholder="Type here" />