Удалить полный стиль кнопки 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;
}

Я думаю, что это кнопка "активное" состояние.

Другие вопросы по тегам