web-dev-qa-db-fra.com

champ de texte ne fonctionne pas en safari

Je travaille sur une calculatrice de prévision de profit eBay en ligne ici

Je n'arrive pas à faire fonctionner les champs de saisie en safari et en safari mobile. Ils fonctionnent bien dans FF et Chrome. Je clique dessus, mais rien ne s'affiche lorsque je tape. J'ai cherché sur Google, mais je n'arrive pas à trouver d'indices. Je me demande si je manque quelque chose dans le CSS. Voici mon css pour les champs de saisie:

input {
    width: 155px;
    padding-left: 5px;
    height: 24px;
    cursor: text;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px black;
    -moz-box-shadow: inset 1px 1px 2px black;
    -webkit-box-shadow: inset 1px 1px 2px black;
    background-color: #F8FBEF;
 }
csssafarivendor-prefix
28
Chip

Votre problème réside dans calcstyle.css ici:

* { 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Je ne sais pas vraiment pourquoi user-select: none; vous empêcherait de taper dans une entrée mais la suppression de ce bloc le résout pour moi.

ÉDITER

Voici une solution possible:

Sélectionnez tout mais vos entrées ...

*:not(input.field) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
54
Turnip

Cela semble toujours être un problème avec Safari 9.0.3 et iOS 9.2. Ce qui a finalement été résolu pour moi, c'était de le régler sur texte:

input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
11
Markus