Показать сообщение отдельно
  #2 (permalink)  
Старый 23.01.2019, 18:57
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Алмаз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>

Последний раз редактировалось Malleys, 23.01.2019 в 19:08.
Ответить с цитированием