Usuń całą stylizację przycisku / przesyłania HTML

99

Czy istnieje sposób na całkowite usunięcie stylu przycisku w przeglądarce Internet Explorer? Używam sprite'a css dla mojego przycisku i wszystko wygląda dobrze.

Ale kiedy klikam przycisk, przesuwa się on trochę na górę, przez co wygląda na to, że nie ma kształtu. Czy występuje stan kliknięcia CSS lub przycisk myszy? Nie wiem, co wywołuje ten stan.

Wiem, że to nic wielkiego, ale czasami liczą się małe rzeczy.

Saif Bechan
źródło

Odpowiedzi:

74

Zakładam, że kiedy mówisz `` kliknij przycisk, przesuwa się on trochę na górę '', mówisz o stanie kliknięcia przycisku myszy i że po zwolnieniu przycisku myszy powraca on do normalnego stanu ? I że wyłączasz domyślne renderowanie przycisku za pomocą:

input, button, submit { border:none; } 

W takim razie..

Osobiście odkryłem, że nie można faktycznie zatrzymać / zastąpić / wyłączyć tej natywnej akcji IE, co skłoniło mnie do zmiany znaczników, aby umożliwić ten ruch i nie wpływać na ogólny wygląd przycisku dla różnych stanów.

To jest moja ostateczna marża:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

darren
źródło
137

Myślę, że zapewnia to dokładniejsze podejście:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<button>Example</button>

Kevin Leary
źródło
2
Nie sądzę, aby w tle było „brak” - a to, co ważne, nie jest dobre.
szeryfderek
4
Zwykle, gdy to robisz, chcesz zastąpić istniejące style, które istnieją dla przycisku. Rzadko zdarza się, abyś chciał to zrobić z czystym, niestylizowanym kodem HTML, stąd użycie !important. To powiedziawszy, usunąłem go, ponieważ jest to decyzja sytuacyjna. background: nonejest całkowicie poprawne: stackoverflow.com/questions/20784292/…
Kevin Leary
Dla każdego z nich! Ważne. Nie sądzę, żebym mógł pracować nad projektem, w którym byłbym zmuszony go użyć. RE: „none” Oto odniesienie, które jest lepsze niż post SO. Kiedy używasz samego „tła”, tak naprawdę używasz skrótów i przebijasz wszystkie atrybuty.
szeryfderek
Doprowadzałem się do szału na punkcie różnicy między stylizowaniem obrazu a jakimś tekstem wewnątrz przycisku, a wyglądaniem tak samo, jak na zewnątrz <button/>... w moim przypadku załatwiło sprawę font: inherit;. Dziękuję Ci!
Kate,
3
Myślę, że ze względu na dostępność prawdopodobnie zechcesz zostawić tam ten zarys. w przeciwnym razie, kiedy przejdziesz do niej tabulatorem, nie będzie żadnej wizualnej wskazówki, gdzie jesteś. świetna odpowiedź!
John Hooper
46

Twoje pytanie brzmi „Internet Explorer”, ale osoby zainteresowane innymi przeglądarkami mogą teraz użyć all: unsetprzycisków, aby je zmienić.

Nie działa w IE, ale wszędzie jest dobrze obsługiwany.

https://caniuse.com/#feat=css-all

Stare ostrzeżenie dotyczące koloru przeglądarki Safari: ustawienie tekstu colorprzycisku po użyciu all: unsetmoże się nie powieść w przeglądarce Safari 13.1 z powodu błędu w WebKit . (Błąd został rozwiązany w przeglądarce Safari 14 i nowszych). „ all: unsetJest ustawiony -webkit-text-fill-colorna czarny, a to zastępuje kolor”. Jeśli musisz ustawić tekst colorpo użyciu all: unset, upewnij się, że ustawiłeś ten sam kolor zarówno dla, jak colori -webkit-text-fill-colordla.

Ostrzeżenie Dostępność: Dla użytkowników, którzy nie korzystają z kursorem myszy, należy ponownie dodać kilka :focusstylizacji, np button:focus { outline: orange auto 5px }o dostępności klawiatury .

I nie zapomnij cursor: pointer. all: unsetusuwa wszystkie style, w tym cursor: pointer, co powoduje, że kursor myszy wygląda jak wskazująca dłoń po najechaniu na przycisk. Prawie na pewno chcesz to przywrócić.

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}
<button>check it out</button>

Dan Fabulich
źródło
1
Dziękuję Ci za to!
Will Ediger
Nie jest to zalecane ze względu na dostępność. Na przykład musisz dodać z powrotem wszystkie outlinestyle dla :focusstanu elementu.
Devin
@Devin Świetna uwaga! Zaktualizowałem post z sugestią ponownego dodania outlinestylu. (Ale nie sądzę, aby było coś jeszcze, co musielibyśmy ponownie dodać do celów 11y. Czy wiesz o czymś?)
Dan Fabulich
8

Spróbuj usunąć obramowanie z przycisku:

input, button, submit
{
  border:none;
}
Sarfraz
źródło
4

W bootstrap 4 jest najłatwiej. Możesz skorzystać z klas: bg-transparentiborder-0

ValRob
źródło
+ shadow-nonedla mnie i to wystarczy. Dzięki!
Bachet
0

Myślę, że to stan przycisku „aktywny”.

Midhat
źródło
To musi być stan aktywny, masz do tego +1. Ale nie udało mi się to poprawnie działać
Saif Bechan
„Myślę” nie jest odpowiedzią.
shinzou
0

Dodaj prosty styl do swojego przycisku

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
SouMitya chauhan
źródło