CSS Checkbox дубликат

0

Я боюсь с помощью флажков стиля. Может ли кто-нибудь сказать мне, почему стандартный флажок показывается рядом с пользовательским полем? Раньше у меня была эта проблема из-за нежелательного пространства в 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/ Это моя скрипка

Теги:
checkbox

6 ответов

3

Inline CSS имеет наибольшую специфику, поэтому он перевешивает ваш другой CSS. Избавьтесь от style="display:inline"

Пример jsFiddle

По MDN:

Следующий список селекторов - это увеличение специфичности:

  • Универсальные селектора
  • Селектор типов
  • Селекторы классов
  • Селекторы атрибутов
  • Псевдо-классы
  • Селекторы идентификаторов
  • Встроенный стиль
2

В HTML вы помещаете style='display:inline; который переписывает display:none; ,

Я вынул

style='display:none;'

из HTML.

JSFiddle

Обратитесь к j08691, чтобы узнать, почему это происходит.

1

Это потому, что стиль display вашего флажка отменяется, когда вы используете style='display:inline; в вашем HTML, по встроенному CSS CSS переопределяет внешний CSS.

Вы можете удалить display:inline; из вашего HTML или использовать !important атрибут здесь:

input[type=checkbox].css-checkbox {                     
    display:none !important;                    
}

Обновленный скрипт

0

попробуйте этот самый простой способ

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>
0

добавьте это в свой css.

-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none

демонстрация

0

Вы можете просто снять поток и скрыть с экрана:

 input[type=checkbox].css-checkbox {
        position:absolute;
        left:-9999px;
    }

Если ввод и метка здесь с правильными атрибутами, это нормально. http://jsfiddle.net/mFHTM/8/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню