Я пытаюсь сделать 2 вещи здесь:
1) Я хочу, чтобы этикетка сменилась на более светлый оттенок серого при выборе входа. Однако я не могу заставить все ярлыки менять цвет.
2) Я хочу поставить метку внутри ввода. Тем не менее, я больше обеспокоен первым, чем вторым, так как реализация второго отменит первый, которому я верю. Но было бы неплохо узнать, как разместить метку внутри ввода.
Я использую метод CSS input: focus ~ label, однако он просто выбирает метки ПОСЛЕ ввода, и у меня есть метка перед вводом, поэтому первая метка не работает для фейдера.
Как я могу заставить все метки менять цвет при выборе входа? Я знаю, что мне нужно переместить метку после ввода, однако, если я сделаю это, метка будет отображаться под входом, который находится не там, где он должен идти.
Я попробовал положение: абсолютное на этикетке, но оно просто объединяет их вместе, поэтому я не уверен, как их перемещать по отдельности.
Вот ссылка на мой кодовый блок, у меня есть две контактные формы, одна отделена от div, другая нет.
https://codepen.io/RJorns/pen/MdmoRp
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div class="contact-wrapper">
<div class="contact-title"><h1>Contact</h1></div>
<form class="contact-form ui equal width form">
<div class="form-wrapper">
<label class="form-label">Name</label>
<input class="form-input" id="name" type="text" placeholder="Name" required>
</div>
<div class="form-wrapper">
<label class="form-label">Email</label>
<input class="form-input" id="email" type="text" placeholder="Email" required>
</div>
<label class="form-label">Message</label>
<div class="field">
<textarea rows="4" id="message" type="text" required></textarea>
</div>
<button id="submit" class="ui grey button">Submit</button>
</form>
</div>
<div class="contact-wrapper">
<div class="contact-title"><h1>Contact</h1></div>
<form class="contact-form ui equal width form">
<label class="form-label">Name</label>
<input class="form-input" id="name" type="text" placeholder="Name" required>
<label class="form-label">Email</label>
<input class="form-input" id="email" type="text" placeholder="Email" required>
<label class="form-label">Message</label>
<div class="field">
<textarea rows="4" id="message" type="text" required></textarea>
</div>
<button id="submit" class="ui grey button">Submit</button>
</form>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
text-align: center;
}
/* Contact */
.contact-wrapper {
margin: 0 auto;
max-width: 75%;
}
.contact-title {
margin-bottom: 2em;
}
.contact-form {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-content: center;
}
input {
box-shadow: inset 0px 0px 13px -1px rgba(77, 77, 77, 1);
}
.form-label {
display: flex;
color: #515151;
}
input:focus ~ label {
color: #a0a0a0;
}
button {
margin-top: 5em;
}
Я хочу, чтобы все метки были светло-серыми, когда они сфокусированы.
Я хочу использовать только CSS, но если мне нужно использовать JS, это нормально.