HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

Эмуляция disabled для label

В этом топике расскажу вам как сделать эмуляцию disabled для элемента label. Как известно, Интернет Эксплорер понимает прямое задание параметра disabled для label и делает текст затемненный, но вот нормальные браузеры (о чудо!) этого не понимают.

Итак, чтобы съэмулировать disabled для label элементов, нужно сделать следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>disabled для label</title>
<style type="text/css">
label[disabled="true"]{
    opacity:0.4;
}
</style>
</head>
<body>
<form action="#">
    <label disabled="true">Сюда нельзя</label>
    <input name="something" value="писать" disabled="true" />
</form>
</body>
</html>

Т.е., как вы видите, мы с помощью магических слов в css, задаем прозрачность opacity:0.4 для элементов label, у которых стоит параметр disabled=’true’, что делает текст внутри label затемненным.

Метки: ,

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос