Фонарик цвет фона и стиль

-2

Я читал, что из-за разных настроек браузера нет хороших способов стилизации флажков. Я знаю, что вы должны иметь возможность изменить цвет фона с обертыванием каждого флажка в Div, но как насчет границы и arraow?Фонарик цвет фона и стиль

Но, возможно, кто-то есть какие-либо советы по стилю их так:

В данный момент у меня по умолчанию в Firefox:

источник

2016-08-09 Deddy

У меня нет Firefox, так что те стили по умолчанию, или вы уже стиль их для себя (и если да, то не могли бы вы показать CSS)? –

http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – Andrew

-1

Если вы используете Fontawesome (http://fontawesome.io/icons/) , вы сможете стилизовать эти элементы, как любой другой шрифт. Или http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

источник

2016-08-09 13:09:55

Добро пожаловать в Stack Overflow! Хотя это теоретически может ответить на вопрос, [было бы желательно] (// meta.stackoverflow.com/q/8259) включить сюда основные части ответа и предоставить ссылку для справки. –

Использование маскируется наложения

label { 
 
    display: block; 
 
    border: 4px solid #88a; 
 
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset; 
 
    border-radius: 10%; 
 
    width: 1em; 
 
    height: 1em; 
 
} 
 
input { 
 
    display: none; 
 
} 
 
input:checked + label { 
 
    background-color: rgba(0, 255, 0, .8); 
 
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset; 
 
}

<input type="checkbox" id="chk"> 
 
<label for="chk"></label>

источник

2016-08-09 13:15:33

Deddy, вы можете стилизовать элементы после <input> с CSS кодом input + div. Если флажок установлен, попробуйте стиль input:checked + div. Если вы скрываете элемент ввода и окружаете все с помощью <label>, вы можете легко стилизовать элемент div и другие элементы внутри них. Остальное зависит от вашей фантазии;)

<label> 
    <input type="checkbox"> 
    <div></div> 
</label>

источник

2016-08-09 13:18:10

Я считаю, что лучший способ, чтобы обернуть радио/флажок в пролете, ДИВ (любой), то есть ярлык с атрибутом ссылается идентификатор входа ,

Затем сокрытие ввода с использованием видимости: скрытая и стильная этикетка, как вам хотелось бы. (Обратите внимание, что вы можете иметь несколько меток для одного ввода).

Вы можете использовать до или после, чтобы добавить контрольные метки.

.styled-radio { 
 
    visibility:hidden; 
 
    position:absolute; 
 
    z-index:-2; 
 
} 
 

 
.styled-radio-label { 
 
    border:1px solid #ccc; 
 
    height:15px; 
 
    width:15px; 
 
    position:relative; 
 
} 
 

 

 
.styled-radio:checked + .styled-radio-label:after { 
 
    content:'\2713'; 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    transform:translateY(-50%) translateX(-50%); 
 
} 
 

 
label { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<span> 
 
    <input type='radio' id='html' value='html' class='styled-radio' name='lang'/> 
 
    <label for='html' class='styled-radio-label'></label> 
 
    <label for='html'>HTML</label> 
 
</span> 
 

 
<span> 
 
    <input type='radio' id='css' value='css' class='styled-radio' name='lang'/> 
 
    <label for='css' class='styled-radio-label'></label> 
 
    <label for='css'>CSS</label> 
 
</span> 
 

 
<span> 
 
    <input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/> 
 
    <label for='JS' class='styled-radio-label'></label> 
 
    <label for='JS'>JS</label> 
 
</span>

источник

2016-08-09 13:22:33

Фонарик цвет фона и стиль

ответ

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