Usuń obramowanie z przycisków

109

Próbowałem tworzyć przyciski i wstawiać własne obrazy zamiast standardowych obrazów przycisków. Jednak szara ramka ze standardowych przycisków nadal pozostaje, pokazując na zewnątrz moich czarnych obrazów przycisków.

Czy ktoś wie, jak usunąć tę szarą ramkę z przycisku, więc to tylko sam obraz? Dziękuję Ci.

Jameson W.
źródło
Spróbuj -webkit-appearance: inherit;lub-webkit-appearance:initial
Max
1
@Brut: Mogę się mylić, ale wydaje mi się to specyficzne dla przeglądarki i jestem prawie pewien, że Jameson chce czegoś, co będzie działać we wszystkich nowoczesnych przeglądarkach.
Michael Scheper

Odpowiedzi:

185

Dodaj

padding: 0;
border: none;
background: none;

do swoich przycisków.

Próbny:

https://jsfiddle.net/Vestride/dkr9b/

Vestride
źródło
Doceniam ... ale dodałem tak jak powiedziałeś do arkusza stylów i niestety nie zadziałało. Czy powinienem po prostu osadzić go bezpośrednio w kodzie HTML, jeśli to coś zmieni?
Jameson W
Dodałem skrzypce plus background: none;do przycisków. Rzuć okiem na skrzypce i zobacz, czy to działa dla Ciebie.
Vestride,
37

Wydaje mi się, że to działa doskonale.

button:focus { outline: none; }
Daniel Lee
źródło
4
outline:none;nie jest zalecane ze względu na dostępność. Jeśli musisz usunąć obramowanie fokusu, podaj innym sposób, aby użytkownicy mogli zobaczyć, że jest fokus. outlinenone.com
Vestride
10

Miałem ten sam problem i mimo że stylizowałem mój przycisk w CSS, nigdy nie wychwycił, border:noneale to, co zadziałało, to dodanie stylu bezpośrednio do przycisku wejściowego w następujący sposób:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
Pchła
źródło
używasz kaskady CSS, aby nadpisać właściwość stylem wbudowanym. Powinieneś zapoznać się z artykułami na temat kaskady CSS i specyfiki CSS.
DrCord
2

Spróbuj użyć: border:0;lubborder:none;

Filipe Manuel
źródło
1

Zwykłą sztuczką jest uczynienie samego obrazu częścią linku zamiast przycisku. Następnie należy powiązać zdarzenie „click” z niestandardową obsługą.

Struktury takie jak Jquery-UI lub Bootstrap robią to po wyjęciu z pudełka. Swoją drogą, użycie jednego z nich może znacznie ułatwić całą koncepcję aplikacji.

yadutaf
źródło
1

Możesz także spróbować background:none;border:0pxprzycisków.

również selektory css to div#yes button{..}i div#no button{..}. ma nadzieję, że to pomoże


źródło
Możesz także ustawić tło przycisku jako obrazy, zamiast używać tagów img
Lub zrób to w czystym CSS. jakbackground:#555; font-weight:bold: color:#fff; padding:6px 8px;
0

Aby usunąć domyślną „niebieską ramkę” z przycisku na fokusie przycisku:

W html:

<button class="new-button">New Button...</button>

A w Css

button.new-button:focus {
    outline: none;
}

Mam nadzieję, że to pomoże :)

Kailas
źródło
0

Dodaj to jako css,

button[type=submit]{border:none;}
user8826621
źródło
-3

$ (". myButtonClass"). css (["border: none; background-color: white; padding: 0"]);

KenDev
źródło
3
Lol, nie powinieneś używać jquery do zmiany stylu CSS
zardilior