Блог

Главная - Вопросы по программированию - Пользовательский флажок не отображается в Google Chrome

Пользовательский флажок не отображается в Google Chrome

#html #css #forms

#HTML #css #формы

Вопрос:

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

Какие изменения мне нужны, чтобы запустить его в Chrome?

HTML

 <link href="btn.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="checkbox" class="check" />
</body>

CSS

 .check {
    width:81px;
    height:78px;
    border: 3px ridge;
    border-color:red;
    border-style:outset;
    font:Verdana, Geneva, sans-serif;
    font-style:italic;
    font-size:16px;
    font-weight:bold;
    color:red;
}

Ответ №1:

Похоже, что стиль флажков в WebKit (движок рендеринга, используемый Chrome) — это все или ничего.

Вы можете отключить все стили по умолчанию с помощью -khtml-appearance: none (в настоящее время вам может потребоваться -webkit-appearance: none или просто appearance: none ), но я полагаю, что это буквально не даст вам видимых стилей флажков, поэтому вам придется перестроить все это, используя :checked псевдокласс и фоновые изображения.

Смотрите:

Ответ №2:

Это потому, что IE поддерживает CSS, который он не должен поддерживать. Флажки нельзя часто редактировать с помощью CSS, Firefox и Chrome делают это правильно… Вы могли бы использовать фоновое изображение в качестве макета флажка или просто создать свой собственный с помощью JS.