Удалить полный стиль кнопки HTML / отправить
Есть ли способ полностью удалить стиль кнопки в Internet Explorer? Я использую спрайт CSS для своей кнопки, и все выглядит хорошо.
Но когда я нажимаю кнопку, она немного перемещается к вершине, она выглядит не в форме. Есть ли щелчок css или mousedown? Я не знаю, что вызывает это состояние.
Я знаю, что это не очень важно, но иногда важны мелочи.
6 ответов
Я предполагаю, что когда вы говорите " нажмите кнопку, она немного переместится наверх ", вы говорите о состоянии щелчка мыши по кнопке и, когда вы отпускаете щелчок мыши, она возвращается в свое нормальное состояние? И что вы отключаете рендеринг кнопки по умолчанию с помощью:
input, button, submit { border:none; }
Если так..
Лично я обнаружил, что вы не можете на самом деле остановить / переопределить / отключить это собственное действие IE, что заставило меня немного изменить мою разметку, чтобы учесть это движение и не влиять на общий вид кнопки для различных состояний.
Это моя последняя наценка:
<span class="your-button-class">
<span>
<input type="Submit" value="View Person">
</span>
</span>
Я думаю, что это обеспечивает более тщательный подход:
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<button>Example</button>
Ваш вопрос говорит "Internet Explorer", но для тех, кто интересуется другими браузерами, теперь вы можете использовать all: unset
на кнопки, чтобы расстегнуть их.
Это не работает в IE или Edge 18, но хорошо поддерживается везде.
button {
all: unset;
}
<button>check it out</button>
В начальной загрузке 4 проще всего. Вы можете использовать классы: bg-transparent
а также border-0
Добавьте простой стиль вашей кнопке
.btn {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
Попробуйте удалить границу с вашей кнопки:
input, button, submit
{
border:none;
}