Как стилизовать отключенный флажок?

Question

Знаете ли вы, как я могу установить флажок, когда он отключен?

Например:

<input type="checkbox" value="All Terrain Vehicle" 
     name="exfilter_All Terrain Vehicle" 
     id="exfilter_All_Terrain_Vehicle" 
     class="exfilter" disabled=""> 

Answer 1

Используйте :disabledCSS3 pseudo-selector

Answer 2

Вы можете выбрать его с помощью CSS, как это:

input[disabled] { /* css attributes */ } 

Answer 3

Используйте CSS в :disabled селектор (для CSS3):

checkbox-style { } 
checkbox-style:disabled { } 

Или вам нужно использовать javascript для изменения стиля, основываясь на том, когда вы включаете/отключите его (предположим, что он включен/отключен в зависимости от вашего вопроса).

Answer 4

Используйте селектор атрибута в CSS

input[disabled]{ 
    outline:1px solid red; // or whatever 
} 

для флажка используют исключительно

input[type=checkbox][disabled]{ 
    outline:1px solid red; // or whatever 
} 

пример на http://www.jsfiddle.net/gaby/pxKcR/2/

Answer 5

Флажки (радио-кнопки и <select>) являются компонентами на уровне ОС, а не браузер уровня. Вы не можете надежно стилизовать их таким образом, чтобы они были согласованы между браузерами и операционными системами.

Лучше всего надеть наложение сверху и стиль, который вместо этого.

Answer 6

Это поддерживается IE тоже:

HTML

class="disabled" 

CSS

.disabled{ 
... 
} 

Answer 7

Вы не можете стиль отключенного флажок напрямую, потому что он управляется с помощью браузера/OS.

Однако вы можете быть умны и заменить флажок ярлыком, который имитирует флажок, используя чистый CSS. Вам нужно иметь соседнюю метку, которую вы можете использовать для создания нового «псевдо-флажка». По сути, вы полностью перерисовываете вещь, но она дает вам полный контроль над тем, как она выглядит в любом состоянии.

Я выброшенные простой пример, так что вы можете увидеть его в действии: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

Вот пример:

input[type="checkbox"] { 
 
    display: none; 
 
} 
 

 
label:before { 
 
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    border: 1px solid #035f8f; 
 
    height: 36px; 
 
    width: 36px; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
input[type="checkbox"] + label:before { 
 
    content: ''; 
 
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    border-color: #3d9000; 
 
    color: #96be0a; 
 
    font-size: 38px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
} 
 

 
input[type="checkbox"]:disabled + label:before { 
 
    border-color: #eee; 
 
    color: #ccc; 
 
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
} 
 

 
input[type="checkbox"]:checked + label:before { 
 
    content: '✓'; 
 
}

<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div> 
 
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div> 
 
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div> 
 
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>

В зависимости от вашего уровня совместимости браузера и доступность, некоторые дополнительные настройки должны быть сделаны.

Answer 8

input[type='checkbox'][disabled][checked] { 
width:0px; height:0px; 
} 
input[type='checkbox'][disabled][checked]:after { 
content:'\e013'; position:absolute; 
margin-top:-10px; 
opacity: 1 !important; 
margin-left:-5px; 
font-family: 'Glyphicons Halflings'; 
font-style: normal; 
font-weight: normal; 
}