2

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

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

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;

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

2 ответа 2

5

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

input {
  display: none;
}

span::after {
  content: '☐';
}

input:checked+span::after {
  content: '☑';
}
<label>
  <input type="checkbox" />
  <span></span>  
</label>

2

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.