Я боюсь с помощью флажков стиля. Может ли кто-нибудь сказать мне, почему стандартный флажок показывается рядом с пользовательским полем? Раньше у меня была эта проблема из-за нежелательного пространства в CSS, но на этот раз я не вижу этой проблемы.
CSS
/*CHECKBOX STYLING*/
input[type=checkbox].css-checkbox {
display:none;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:27px;
height:22px;
display:inline-block;
line-height:22px;
background-repeat:no-repeat;
background-position:0 0;
font-size:22px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position:0 -22px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_ca0ba5f8e61aa87173232fcf5ce5eac5.png);
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
HTML
<input class="css-checkbox" style="display:inline" type="checkbox" id="chair" name="option" onClick="showHideChair(this,'myChair')"><label class="css-label" for="chair">Chair</label>
<input class="css-checkbox"
http://jsfiddle.net/mFHTM/3/ Это моя скрипка
Inline CSS имеет наибольшую специфику, поэтому он перевешивает ваш другой CSS. Избавьтесь от style="display:inline"
По MDN:
Следующий список селекторов - это увеличение специфичности:
- Универсальные селектора
- Селектор типов
- Селекторы классов
- Селекторы атрибутов
- Псевдо-классы
- Селекторы идентификаторов
- Встроенный стиль
Это потому, что стиль display
вашего флажка отменяется, когда вы используете style='display:inline;
в вашем HTML, по встроенному CSS CSS переопределяет внешний CSS.
Вы можете удалить display:inline;
из вашего HTML или использовать !important
атрибут здесь:
input[type=checkbox].css-checkbox {
display:none !important;
}
попробуйте этот самый простой способ
CSS
.test_1 {
white-space: nowrap;
width: 100px;
overflow: hidden;
}
.myCheckbox input {
display: none;
}
.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background:#00F;
}
.myCheckbox input:checked + span {
background:#0F0;
}
HTML
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span style="border:#666 1px solid;">.</span>
</label>
добавьте это в свой css.
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none
Вы можете просто снять поток и скрыть с экрана:
input[type=checkbox].css-checkbox {
position:absolute;
left:-9999px;
}
Если ввод и метка здесь с правильными атрибутами, это нормально. http://jsfiddle.net/mFHTM/8/