Javascript.RU

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

Изменить цвет блока
Добрый вечер, как сделать чтобы при клике на input менялась рамка блока div(.form_top), а так же менялся цвет ссылки внутри этого div. А при клике на другой input блока div соседний (.form_name), все становилось так же ,изменялась рамка и цвет ссылки, а в первом было бы без изменений . Так сказать переключатель
Вложения:
Тип файла: zip Верстка.zip (30.7 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2019, 18:57
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

Сообщение от Алмаз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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
изменить цвет фона и обратно... cesarr Events/DOM/Window 11 04.04.2017 15:19
Как изменить цвет и размер шрифта в Java savas332 Серверные языки и технологии 3 09.01.2014 16:02
Как изменить цвет кнопки, чтобы когда я нажал, то цвет не пропадал? ntest Общие вопросы Javascript 1 31.07.2013 09:14
Изменить цвет текста активной radio button xlebus Общие вопросы Javascript 2 16.04.2012 18:24