Изменение цвета фона html-флажка - PullRequest
Новая
       4

Изменение цвета фона html-флажка

3 голосов
/ 02 мая 2011

Возможно ли, и если да, то как изменить цвет фона в HTML-флажке? Я специально говорю о белой коробке, которая находится за маленьким символом галочки.

Я довольно много искал по этому вопросу, но не нашел окончательного ответа.

Ответы [ 5 ]

6 голосов
/ 02 мая 2011

Только с помощью сценариев вы можете создать кросс-браузерное решение, см. Здесь пример стилизованного флажка ... .

Используется jQuery UI для изменения стиля

1 голос
/ 17 июля 2013

Джефф Б показал другой способ , чтобы раскрасить флажок.Он также привел пример jsfiddle.

Идея состоит в том, чтобы обернуть span и использовать изображение png с некоторыми javascript и css.

1 голос
/ 02 мая 2011

Только AFAIK Opera поддерживает оператор CSS "background" для формульных элементов.

Для получения дополнительной информации, проверьте это: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

1 голос
/ 02 мая 2011

Я сомневаюсь, что это возможно, так как внешний вид флажка в любом случае зависит от ОС (мои флажки имеют затененный серый фон, а не белый).

Решением может быть создание собственного флажка с использованием JavaScript и некоторой графики.

0 голосов
/ 31 октября 2013

Я использую флажок цвета. Я подумал, что установить флажок цвета будет легко, но когда я начал его применять.это было так много времени, что Иов сделал в первый раз.ниже приведены HTML и CSS для поля COLOR CHECK, которую может настроить каждый пользователь, а также этот HTML и CSS.

HTML: - 

<div class="squaredThree left">
    <input type="checkbox" value="None" id="squaredThree" name="check" />
    <label for="squaredThree"></label>
</div>

CSS: - 

.squaredThree {
    width: 20px;    
    position: relative;
}

.squaredThree label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    background:#f7f7f7;
    border:1px solid #6d7279;
}

.squaredThree label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 2px;
    left: 2px;
    border: 3px solid #0b9dda;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.squaredThree label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
...