Как стилизовать name

"Стилизация name" или "Как стилизовать name". Насколкьо я знаю... атрибут "name" используется в двух тегах...

Подробно о стилизации по атрибуту "name"

1. Стилизуем input "name"
2. Стилизация нескольких input "name"
3. Пример стилизации по атрибуту "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 со значением.

<a name="example" target=_blank>текст</a>

Далее - изменим цвет текста(!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"

текст текст текст