Отображение checkboxes в разных браузерах

245

13 ноября 2017, 19:50

Здравствуйте,

Столкнулся с проблемой. Чекбоксы на Хроме и Опере отображаются совершенно по разному. И если на Хроме отображение корректное: то на Опере вообще ужас:

HTML:

<p style="font-size: 17pt; font-weight: 600;">What kinds of web support services do you need?*</p> 
<p><input name="services[]" type="checkbox" value="Updating the content of the website (articles, photos, videos, prices etc.)" /> <br />Updating the content of the website (articles, photos, videos, prices etc.)</p> 
<p><input name="services[]" type="checkbox" value="Backing up Files (once a week)" /> <br />Backing up Files (once a week)</p> 
<p><input name="services[]" type="checkbox" value="Updating Website Software" /><br />Updating Website Software</p> 
<p><input name="services[]" type="checkbox" value="Fixing HTML/CSS/PHP/JavaScript errors and bugs" /> <br />Fixing HTML/CSS/PHP/JavaScript errors and bugs</p> 
<p><input name="services[]" type="checkbox" value="Sitemap generation" /> <br />Sitemap generation</p> 
<p><input name="services[]" type="checkbox" value="Website performance and uptime monitoring" /> <br />Website performance and uptime monitoring</p> 
<p><input name="services[]" type="checkbox" value="Suggestions for website improvements" /> <br />Suggestions for website improvements</p> 
<p><input name="services[]" type="checkbox" value="Regular reporting and feedback" /> <br />Regular reporting and feedback</p> 
<p><input name="services[]" type="checkbox" value="I'm not sure. Help me please" /><br /><i>I'm not sure. Help me please</i></p> 
<p><input name="services[]" type="checkbox" value="I need a full package of services" /><br /><b>I need a full package of services</b></p>

СSS:

.contactform div form p input { 
    width: 71%; 
    height: 40px; 
    font-size: 20pt; 
    overflow: auto; 
    border: 2px solid #eabd20;

Как можно в этом случае сделать чтобы опера отображала чекбоксы тоже по центру, а не где-то сбоку?

Answer 1

Используйте кроссбраузерные псевдочекбоксы:

input { 
  display: none; 
} 
 
span::after { 
  content: '☐'; 
} 
 
input:checked+span::after { 
  content: '☑'; 
}

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

Answer 2

Согласно стандарту HTML, браузер не обязан уважать подавляюще большинство стилей CSS на инпутах. Количество стилей, которые браузер обязан применять к инпутам, очень ограничено, и всякие границы и фоны в их число не входят.

Не знаю, зачем вам сдалась ископаемая версия упокоившейся с миром Оперы, но какой-нибудь Сафари будет игнорировать ещё больше стилей инпутов.

Если вам нужно стилизовать инпуты, то рисуйте их сами с помощью полноценных элементов HTML, а затем привязывайте их к реальным инпутам. В случае с checkbox это можно сделать как показано в ответе @br3t.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Маска номера телефона

Ребята, добрый день,помогите написать функцию для инпута, что бы был формат ввоа номера номера телефона вот такого примера: +38(_ _ ) _ _ - _ _ - _ _ Подключена...

266

HTML

Нет доступа к id

Когда тапаю на кнопку, то пишет, что

283

MySQL

MySQL и JOIN из трех таблиц

Имеем три таблицы shop, category, product в MySQL

326

MySQL

SQL запрос (please help)

Прошу помочьЕсть две таблицы:

251