phpjsJqueryhtmlcssblog

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

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

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

1. Стилизуем input "name"
2. Стилизация нескольких input "name"
3. Пример стилизации по атрибуту "name"(якорь)

Скопировать ссылку



Стилизуем input "name"

Для иллюстрации стилизации по атрибуту нам вам понадобится:

Тег input + атрибут name с неким "значением" - пусть будет "text"

<input name="text" type="значение" value="">

Далее обратимся конкретно к данному input с атрибутом "text"

<style>
input[name="text"] {
background: red;
}
</style>


Выведем пример стилизации тега по атрибуту name

Как видим "background" прекрасно прилепился к тегу input с name="text":

Второй пример стилизации тега по атрибуту name

Второй пример "стилизации тега по атрибуту name" - теперь давайте изменим значение атрибута "name" на "email"

<input name="email" type="значение" value="">
Стили для изменения цвета по атрибуту тфьу
<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"

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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---