Как установить флажок HTML в виде бумажной формы?

У меня есть несколько HTML флажков Я хотел бы стиль как форма бумаги:Как установить флажок HTML в виде бумажной формы?

Есть ли способ сделать это с помощью CSS?
Есть ли способ построить элемент управления, который выглядит так, но действует как флажок?

Когда флажок установлен, должен быть X в нем:

Update

Для тех, кто ищет аналогичный вопрос: Make checkbox in chrome look like one in IE

У этого есть также довольно хорошие ответы.

2015-09-08 Chris Weber

I предложит вам o задавать вопросы, которые не основаны на предложениях, и иметь некоторые ошибки или необходимые для решения проблемы. Это мнение основано на мнениях. – divy3993

Возможный дубликат [css only checkbox (с атрибутом контента)] (http://stackoverflow.com/questions/13465507/css-only-checkbox-with-content-attribute) –

Вот решение, основанное на ваших макетах:

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
/* Hide default checkbox */ 
 
input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
/* Style custom checkbox (indicated by <span>) that corresponds to its hidden version */ 
 
input[type=checkbox] + label span { 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    margin: 0 4px 0 8px; 
 
    padding: 2px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
} 
 

 
/* 'Checked' state */ 
 
input[type=checkbox]:checked + label span::after { 
 
    content: "X"; 
 
}

<form> 
 
    Occupant 
 
     
 
    <input type="checkbox" id="owner" name="occ" value="Owner"/> 
 
    <label for="owner"><span></span>Owner</label> 
 
     
 
    <input type="checkbox" id="tenant" name="occ" value="Tenant"/> 
 
    <label for="tenant"><span></span>Tenant</label> 
 
     
 
    <input type="checkbox" id="vacant" name="occ" value="Vacant"/> 
 
    <label for="vacant"><span></span>Vacant</label> 
 
</form>

источник

2015-09-08 17:34:58

Это довольно круто, спасибо! –

Добро пожаловать! –

-1

Скрыть реальный input[type=checkbox] и использовать псевдоэлемент :after, чтобы создать все, что вы хотите, перед этим флажком. Вот вопрос с аналогичной проблемой: css only checkbox (with content attribute). Затем просто используйте CSS так, как вы хотите стилизовать его.

источник

2015-09-08 16:50:49

Почему downvote? Вопрос, к которому я привязался, уже имеет ответ! –

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

input[type=checkbox] { 
 
    position: relative; 
 
    visibility: hidden; 
 
    cursor: pointer; 
 
} 
 

 
input[type=checkbox]:after { 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -30px; 
 
    visibility: visible; 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    border-radius: 4px; 
 
    background:url(http://www.clipartbest.com/cliparts/yTo/gj4/yTogj4zEc.png); 
 
    background-size:100%; 
 
    color: #fff; 
 
    font-weight: 600; 
 
    cursor: pointer; 
 
} 
 

 
input[type=checkbox]:checked:after { 
 
    content: ""; 
 
    background: url(http://www.clipartbest.com/cliparts/ncX/jL6/ncXjL6rcB.png); 
 
    background-size:100%; 
 
}

<input type="checkbox" />

JSFiddle

Mozilla FireFox UPDATE

Используя только некоторые фиктивные элементы, для использования здесь метку и использовать его с применением CSS к нему.

label.checkbox input[type="checkbox"] {display:none;} 
 
label.checkbox span { 
 
    display:inline-block; 
 
    width:25px; /* This must be depend on image resolution */ 
 
    height:25px; /* This must be depend on image resolution */ 
 
    background:url(http://www.clipartbest.com/cliparts/yTo/gj4/yTogj4zEc.png); 
 
    background-size:100%; 
 
    -moz-background-size:100%; 
 
    background-repeat:no-repeat; 
 
    vertical-align:middle; 
 
    margin:3px; 
 
} 
 
label.checkbox :checked + span { 
 
    background:url(http://www.clipartbest.com/cliparts/ncX/jL6/ncXjL6rcB.png); 
 
    background-size:100%; 
 
    -moz-background-size:100%; 
 
}

<label class="checkbox"><input type="checkbox"/><span></span> Whatever you wanna say here... </label>

Примечание: Но все равно не будет работать в old browsers

источник

2015-09-08 17:03:14 divy3993

Спасибо, все же я не знаю, почему кто-то проголосовал, неважно. :) – divy3993

Мне тоже нравится голосовать, но с комментариями, почему? Чтобы я мог улучшить себя. Спасибо – divy3993

Спасибо, к сожалению, это не работает в Firefox. –

HTML

< пролете OnClick = "this.innerHTML = (й is.innerHTML?'': 'X') ">

CSS

span{ 
display:inline-block; 
width:15px; 
height:15px; 
font:14px verdana; 
border:solid 1px black; 
color:green; 
vertical-align:baseline; 
cursor:pointer;}

http://jsfiddle.net/ApHME/59/

источник

2015-09-08 17:05:15

шрифт должен быть 'verdana' –

Как установить флажок HTML в виде бумажной формы?

ответ

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