Изменить цвет фона флажка, если он установлен

Я изменяю внешний вид всех моих флажков с помощью css3, но я пытаюсь найти лучший способ реализовать проверенные свойства (при проверке флажок должен быть заполнен только сплошным цвет), и я действительно не знаю, пользуется ли использование прокладки для того, чтобы выполнить это, это лучшая практика, поскольку я получаю разные результаты при использовании разных браузеров. Некоторые из них будут очень благодарны.Изменить цвет фона флажка, если он установлен

Вот что я хочу сделать:

Неконтролируемый Checkbox:

Проверено Checkbox:

Вот CSS и HTML:

.checkbox { 
 
    margin: 0 0 1em 2em; 
 
} 
 
.checkbox .tag { 
 
    color: #595959; 
 
    display: block; 
 
    float: left; 
 
    font-weight: bold; 
 
    position: relative; 
 
    width: 120px; 
 
} 
 
.checkbox label { 
 
    display: inline; 
 
} 
 
.checkbox .input-assumpte { 
 
    display: none; 
 
} 
 
.input-assumpte + label { 
 
    -webkit-appearance: none; 
 
    background-color: #fafafa; 
 
    border: 1px solid #cacece; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
 
    padding: 9px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.input-assumpte:checked + label:after { 
 
    background-color: #595959; 
 
    color: #595959; 
 
    content: '\2714'; 
 
    font-size: 10px; 
 
    left: 0px; 
 
    padding: 2px 8px 2px 2px; 
 
    position: absolute; 
 
    top: 0px; 
 
}

<div class="checkbox"> 
 
    <div class="tag">Confidencial</div> 
 
    <input type="checkbox" class="input-assumpte" id="input-confidencial"> 
 
    <label for="input-confidencial"></label> 
 
</div>

Обратите внимание, что я должен включить символ в окошке проверяется статус для того, чтобы быть в состоянии добавить отступы, чтобы заполнить весь флажок с цветом фона, как я сказал прежде, я действительно пытаюсь найти лучший способ сделать это.

Вот JSFiddel: http://jsfiddle.net/Lter04p8/

источник

2015-09-01 Lowtrux

Можете ли вы предоставить jsFiddle? – Jacob

@jake преобразован в встроенный фрагмент – CupawnTae

@Jake отредактирован с помощью jsFiddle. – Lowtrux

Нет необходимости прокладки здесь. Просто используйте display: inline-block; на :after, примените width и height, а также примените плавный переход. Также вам не нужны дополнительные <div>.

.checkbox { 
 
    margin: 0 0 1em 2em; 
 
} 
 
.checkbox .tag { 
 
    color: #595959; 
 
    display: block; 
 
    float: left; 
 
    font-weight: bold; 
 
    position: relative; 
 
    width: 120px; 
 
} 
 
.checkbox label { 
 
    display: inline; 
 
} 
 
.checkbox .input-assumpte { 
 
    display: none; 
 
} 
 
.input-assumpte + label:after { 
 
    background-color: #fafafa; 
 
    border: 1px solid #cacece; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
 
    display: inline-block; 
 
    transition-duration: 0.3s; 
 
    width: 16px; 
 
    height: 16px; 
 
    content: ''; 
 
    margin-left: 10px; 
 
} 
 
.input-assumpte:checked + label:after { 
 
    background-color: #595959; 
 
}

<div class="checkbox"> 
 
    <input type="checkbox" class="input-assumpte" id="input-confidencial" /> 
 
    <label for="input-confidencial">Confidencial</label> 
 
</div>

источник

2015-09-01 11:42:39 connexo

это отличное решение @connexo, спасибо большое.Я пытался избежать прокладки, чтобы ваш метод пригодился. – Lowtrux

Добавить правильный background-color и width: 100%; height: 100%; Затем добавить переполнение: скрытый родителю (.input-assumpte) и снимите флажок маркера.

Отметьте, что content: ""; все еще на месте, без него :after или :before не отображается.

.checkbox { 
 
    margin: 0 0 1em 2em; 
 
} 
 
.checkbox .tag { 
 
    color: #595959; 
 
    display: block; 
 
    float: left; 
 
    font-weight: bold; 
 
    position: relative; 
 
    width: 120px; 
 
} 
 
.checkbox label { 
 
    display: inline; 
 
} 
 
.checkbox .input-assumpte { 
 
    display: none; 
 
} 
 
.input-assumpte + label { 
 
    -webkit-appearance: none; 
 
    background-color: #fafafa; 
 
    border: 1px solid #cacece; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
 
    padding: 9px; 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.input-assumpte:checked + label:after { 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ""; 
 
    background-color: #008FD5; 
 
    left: 0px; 
 
    position: absolute; 
 
    top: 0px; 
 
}

<div class="checkbox"> 
 
    <div class="tag">Confidencial</div> 
 
    <input type="checkbox" class="input-assumpte" id="input-confidencial"> 
 
    <label for="input-confidencial"></label> 
 
</div>

источник

2015-09-01 11:35:17 Jacob

Вы можете избавиться от: после завершения. Но так как я не знаю, как строится остальная часть веб-сайта, я просто оставил его для редактирования @Lowtrux. - Во всяком случае, очистить, если это возможно. – Jacob

Правда - я упомянул об этом главным образом потому, что OP пытался избежать использования «padding». – CupawnTae

Спасибо большое @ Jake это сработало отлично! Просто любопытно, что проблемы с кроссбраузером этого решения для глупых вещей, таких как IE8, сделают мое исследование, спасибо, ребята! – Lowtrux

Изменить цвет фона флажка, если он установлен

ответ

Смежные вопросы