|
Сообщение от Алмаз1993
|
|
как сделать чтобы при клике на input менялась рамка блока div(.form_top), а так же менялся цвет ссылки внутри этого div.
|
А как это у вас так получилось... нажимаешь на поле, а страничка-то перезагружается. 😆 И вообще, зачем вам такое нагромождение элементов... я, например, вижу 6 элементов, но почему это так должно быть запутанно, я не понимаю вас! Вот та же самая форма с DRY вёрсткой. (или это хуже, чем WET? Или это я что-то не так понимаю?)
Не нужно штамповать
font-family: Roboto; почти на каждый элемент, достаточно указать
html { font-family: Roboto; } 🚀
|
Сообщение от Алмаз1993
|
|
А при клике на другой input блока div соседний (.form_name), все становилось так же ,изменялась рамка и цвет ссылки, а в первом было бы без изменений . Так сказать переключатель
|
Для этого есть псевдо-класс :focus-within, смотрите пример...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Тестовое задание от РОСПАРТНЕР</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
* {
margin: 0;
padding: 0;
outline: 0;
border: 0;
font: inherit;
text-shadow: inherit;
}
html {
font-family: Roboto, sans-serif;
}
form {
padding-top: 33px;
display: flex;
flex-wrap: wrap;
}
form label {
font-size: 13px;
display: block;
font-weight: bold;
color: #87868a;
flex: 1;
margin: .25em;
border: 1px solid transparent;
}
@media (max-width: 700px) {
form label {
flex: 100%;
}
}
form label:focus-within {
color: #008dfe;
border-color: currentColor;
}
form input, form textarea {
color: #aeadb1;
outline: none;
background: transparent;
padding-top: 4px;
font-weight: bold;
border: none;
width: 100%;
display: block;
padding: 0;
resize: vertical;
}
form input::placeholder {
color: #44414d;
}
form label:has([type="email"]) {
color: black;
}
form input[type="email"]::placeholder {
color: #aeadb1;
}
form label {
padding: 12px 0 12px 18px;
border-radius: 3px;
background: #f7f7fa;
}
form label:nth-of-type(4) {
flex: 100%;
}
form textarea {
font-weight: bold;
border: none;
color: #87868a;
}
form button {
min-width: 120px;
font-size: 15px;
border-radius: 5px;
text-align: center;
background: #e5e9ef;
color: black;
padding: 13px;
margin: .25em;
}
form button:hover {
background: #008dfe;
color: white;
}
</style>
</head>
<body>
<form class="container">
<label>
Название группы
<input type="text" name="work-group" placeholder="Тестовая рабочая группа">
</label>
<label>
ФИО ответственного
<input type="text" name="name" placeholder="Михайлов Игорь Петрович">
</label>
<label>
Email для входа
<input type="email" name="email" placeholder="Введите название">
</label>
<label>
Описание рабочей группы
<textarea name="description" placeholder="Введите краткое и емкое описание для рабочей группы"></textarea>
</label>
<button type="submit">Сохранить</button>
<button type="button">Отмена</button>
</form>
</body>
</html>
