Как стилизовать name
"Стилизация name" или "Как стилизовать name". Насколкьо я знаю... атрибут "name" используется в двух тегах...
Подробно о стилизации по атрибуту "name"
- Стилизуем input "name"
- Стилизация нескольких input "name"
- Пример стилизации по атрибуту "name"(якорь)
Стилизуем input "name"
Для иллюстрации стилизации по атрибуту "name" нам/вам понадобится:
Тег input + атрибут name с неким "значением" - пусть будет "text"
<input name="text" type="значение" value="">
Далее обратимся конкретно к данному input с атрибутом "name" и значением "text":
<style>
input[name="text"] {
background: red;
}
</style>
Выведем пример стилизации тега по атрибуту name
Как видим "background" прекрасно прилепился к тегу input с name="text":
Второй пример стилизации тега по атрибуту name
Второй пример "стилизации тега по атрибуту name" - теперь давайте изменим значение атрибута "name" на "email"
<input name="email" type="email" value="">
Стили для изменения цвета по атрибуту name.
<style>
input[name="email"] {
background: green !important;
}
</style>
Пример стилизации по атрибуту name.
Стилизация нескольких input "name"
Выше разобрал стилизацию по атрибуту и значению.
Но если вам требуется стилизовать сразу несколько тегов по атрибуту "name" - для этого вам потребуется:
Поместим в отдельный div с классом - зачем здесь класс?
<div class="kod">
<input name="text1" type="text" value="">
<input name="text2" type="text" value="">
</div>
В стилях... убираем равно и значение
<style>
.kod input[name] {
background: blue;
}
</style>
Пример стилизации сразу нескольких тегов с атрибутом "name"
Разместим код стилизации прямо здесь.
Как видим два тега с атрибутом "name" - отлично стилизовались!
Пример стилизации по атрибуту "name"(якорь)
Второй тег у которого бывает атрибут "name" - это якорь - он тоже может стилизоваться!
Для ситуации тега по атрибуту "name" нам понадобится:
Тег ссылки + атрибут name со значением.
Далее - изменим цвет текста(!important - применяется в том случае, когда выше уже прописаны стили, чтобы из перебить):
<style>
a[name="example"] {
color: blue !important;
}
</style>
Еще пример стилизации по атрибуту name
Как видим, цвет замечательно изменился по атрибуту name.
Стилизация нескольких тегов по атрибуту name
И если вам требуется стилизовать сразу несколько тегов по атрибуту name, то делаем так:
Html теги:
<div class="kod_2">
<a name="example" target=_blank>текст</a>
<a name="example" target=_blank>текст</a>
<a name="example" target=_blank>текст</a>
</div>
Стили:
<style>
.kod_2 a[name] {
color: red !important;
}
</style>
Пример стилизации сразу нескольких тегов по атрибуту "name"
Этим вы очень поможете проекту! Заранее огромное спасибо!
