web-dev-qa-db-fra.com

Le bouton de saisie HTML css-height ne fonctionne pas sur Safari et Chrome

J'ai une question très basique. Je règle hauteur à 50px pour mon bouton d'envoi de formulaire html Cela fonctionne sur Firefox mais pas sur Chrome ni Safari. Le code est aussi simple que suit:

<input type="submit" value="Send" style="height:50px;" />

Une idée de comment le faire fonctionner sur Chrome et Safari?

htmlbuttoninputheightsubmit
23
Madeline

Changez-le de <input> à <button> et ajoutez -webkit-appearance: none; au début de votre code CSS, par exemple:

.submitbtn {
    -webkit-appearance: none;
    height: 50px;
    background-color:#FFF;
    color:#666;
    font-weight:bold;
    border: solid #666 1px;
    font-size: 14px;
}
46
MeltingDog

Le simple ajout de -webkit-appearance: none; sur mon <input> a fonctionné pour moi sur le navigateur Safari sur Macbook.

6
Sachin Rana

Cela devrait fonctionner aussi.

  -webkit-appearance:default-button;

Il existe de nombreux paramètres pour cette propriété que vous pouvez utiliser et/ou surveiller. En outre, si vous vouliez simplement désactiver les ombres intérieures des champs de saisie, vous pouvez simplement utiliser -webkit-apparence: caret ;.

button
button-bevel
caret
checkbox
default-button
listbox
listitem
media-fullscreen-button
media-mute-button
media-play-button
media-seek-back-button
media-seek-forward-button
media-slider
media-sliderthumb
menulist
menulist-button
menulist-text
menulist-textfield
none
Push-button
radio
searchfield
searchfield-cancel-button
searchfield-decoration
searchfield-results-button
searchfield-results-decoration
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
square-button
textarea
textfield
5
Şήøωў

Ajout à Şήøωў 's (voté)réponse :

@ Safari 11.0.2 (13604.4.7.1.3) @ macOS 10.13.2 (17C88)
par exemple.

input[type=button]{
  -webkit-appearance: button;
}

résolu mon problème (du seul -size principalement composé de [-webkit-] font- * ayant un effet très limité);
écrasant la "feuille de style de l'agent d'utilisateur":

input:matches([type="button"], [type="submit"], [type="reset"]){
  -webkit-appearance: Push-button;
}
0
vike