Рисование проверки внутри флажка, используя только css

Я пытаюсь создать пользовательский флажок только с помощью css и без изображений, но у меня есть немного проблем.Рисование проверки внутри флажка, используя только css

Я следил за несколькими учебниками онлайн, но, похоже, я попал в дорожный блок, и помощь была бы замечательной.

Мой CSS выглядит следующим образом

input[type='checkbox'] { 
    -webkit-appearance: none; 
    background: #dee1e2; 
    width: 1.3em; 
    height: 1.3em; 
    border-radius: 3px; 
    border: 1px solid #555; 
    position: relative; 
    bottom: .3em; 
} 

input[type='checkbox']:checked { 
    -webkit-appearance: none; 
    background: #dee1e2; 
    width: 1.3em; 
    height: 1.3em; 
    border-radius: 5px; 
    position: relative; 
    bottom: .3em; 
    -webkit-transform: rotate(45deg); 
}

Что держит происходит, когда я Повернуть на вращает весь ящик, и я попытался добавления: после того, как к нему, но это, похоже, не делать ничего.

источник

2013-08-02 zazvorniki

Я не совсем уверен, что вы имеете в виду, но '-webkit-преобразования: поворот (45 градусов);' удалить это если вы не хотите, чтобы флажок поворачивался. – AmazingDreams

Да, я знаю, что это то, что заставляет его вращаться. Идея состояла в том, чтобы просто повернуть белую рамку, чтобы она выглядела как чек, но у меня проблема с этим. – zazvorniki

Тогда я думаю, вы должны упаковать флажок в какой-то родительский 'div' и использовать его для создания границы, повернуть этот div, используя' jQuery.change', в поле и дефрагментировать поле в той же функции. – AmazingDreams

Вы можете использовать проверку Юникода, или даже значок шрифт, если вы хотите получить действительно фантазии ...

input[type='checkbox'] { 
    -webkit-appearance: none; 
    background: #dee1e2; 
    width: 1.3em; 
    height: 1.3em; 
    border-radius: 3px; 
    border: 1px solid #555; 
    position: relative; 
    bottom: .3em; 
} 
/* added content with a unicode check */ 
input[type='checkbox']:checked:before { 
    content: "\2713"; 
    left: 0.2em; 
    position: relative; 
}

Demo

источник

2013-08-02 17:11:19 brbcoding

Да, это прекрасно! Вы правы! :) – zazvorniki

Это не работает на firefox. ;) – AmazingDreams

@AmazingDreams это правда ... Также не похоже, что есть что-то, что действительно можно сделать по этому поводу. Мог бы создать другой элемент для * look * и действовать как флажок, но не фактический флажок. Если кто-нибудь знает какие-нибудь хорошие обходные пути, это было бы потрясающе. – brbcoding

На самом деле я попробовал то же самое на мой сайт (http://e-home.mx), но я в конечном итоге скрывая входной элемент с помощью CSS и добавления метки к каждому из которых является тот, который «эмулирует» его поведение, как это:

HTML

<input type="checkbox" id="c8" name="c8" /> 
<label for="c8"><span></span>Label here</label>

CSS:

input[type="checkbox"] + label{color:#000;font-family:Arial, sans-serif;} 
input[type="checkbox"] + label span{ 
display:inline-block; 
width:19px; 
height:19px; 
margin:-1px 4px 0 0; 
vertical-align:middle; 
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") left top no-repeat; 
cursor:pointer; 
} 
input[type="checkbox"] {display:none} 
input[type="checkbox"]:checked + label span { 
background:url("http://e-home.mx/html5/img/form_elements_outlined.png") -19px top no-repeat; 
}

Вот скрипка:

http://jsfiddle.net/xedret/bTAGU/

источник

2013-08-02 17:17:42 Xedret

Это работает и очень полезно (спасибо за ваш ответ!), Но я пытался сделать что-то, что не включало бы никаких изображений. – zazvorniki

Рисование проверки внутри флажка, используя только css

ответ

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