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

У меня есть флажок, при нажатии которого необходимо отправить форму даже без помощи javascript. Таким образом, я создаю форму с одной кнопкой внутри и пытаюсь замаскировать эту кнопку под флажок.

Пока у меня есть это как мой HTML:

<form>
    <button class="checkbox" type="submit">
    </button>
</form>

И это мой CSS:

.checkbox {
    padding: 0;
    height: 13px;
    width: 13px;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}

Чего мне не хватает, чтобы сделать этот класс совместимым с IE, Safari, Opera и т. д.?

Кроме того, как я могу сделать кнопку отмеченной?


checkbox html css
person johnnyodonnell    schedule 06.04.2018    source источник
comment
даже без помощи JavaScript, но вам нужен JavaScript, чтобы отправить форму, используя только флажок.   -  person Mikey    schedule 06.04.2018
comment
@Mikey Майки, я не использую настоящий флажок. Я использую кнопку и маскирую эту кнопку под флажок   -  person johnnyodonnell    schedule 06.04.2018

Ответы (3)


arrow_upward
2
arrow_downward

в дополнение к предыдущему ответу о добавлении префиксов поставщиков вы можете сделать это казаться проверенным, добавив галочку в html

.checkbox {
   height: 25px;
   width: 25px;
   -webkit-appearance: checkbox;
   -moz-appearance: checkbox;
   -ms-appearance: checkbox; 
   -o-appearance: checkbox;
   appearance: checkbox;
}
    <button class="checkbox" type="submit">✔</button>

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

.checkbox {
  height: 25px;
  width: 25px;
  margin: 0;
  padding: 0;       
}
 <button class="checkbox" type="submit">✔</button>

person Taki    schedule 06.04.2018
comment
Похоже, что галочка не отображается в Firefox - person johnnyodonnell; 06.04.2018
comment
да, Firefox не позволит вам поместить какой-либо контент в кнопку с помощью -moz-appearance, я обновил свой ответ для альтернативы - person Taki; 06.04.2018

arrow_upward
2
arrow_downward

-ms-appearance для IE и -o-appearance для Opera

Кстати, это называется префиксом поставщика.

person Megoh    schedule 06.04.2018
comment
Спасибо, парни! Как насчет того, чтобы кнопка выглядела отмеченной? Это возможно? - person johnnyodonnell; 06.04.2018
comment
А что для других браузеров? Фаерфокс, Хрум, Сафари? - person H. Pauwelyn; 06.04.2018

arrow_upward
0
arrow_downward

вы можете использовать svg:

.button{
  display: inline-block;
  width:20px;
  height:30px;
  padding:20px 30px;
  border:3px solid orangered;
  background:white;
  border-radius: 3px;
  position:relative;
  cursor:pointer;}
 
.icon {
  display: inline-block; 
  stroke-width: 0;
  width:30px;
  fill: orangered;
  position:absolute;
  line-height:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
 
}
<form class="form" action="">
  <button class="button">
  <svg class="icon icon-checkmark" viewbox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
  </svg>
  </button>
</form>

person Giacomo Ciampoli    schedule 06.04.2018
comment
span не отправит форму - person Taki; 06.04.2018
comment
он может делать с js - person Giacomo Ciampoli; 06.04.2018
comment
первая строка вопроса: I've a got checkbox that when clicked needs to submit a form, even without the help of javascript. - person Taki; 06.04.2018
comment
Да, @Таки прав. Мне нужно, чтобы это работало без javascript - person johnnyodonnell; 06.04.2018