Rembourrage supplémentaire dans l'élément de sélection de l'option en chrome

J'ai un élément de sélection où je permets aux utilisateurs de choisir la classification et la description. Dans le navigateur chrome seulement, j'ai un rembourrage supplémentaire que je ne suis pas capable de retirer avec padding: 0 ou avec d'autres balises css. Screen from Chrome Rembourrage supplémentaire dans l'élément de sélection de l'option en chrome

Toutefois, le même élément dans les autres navigateurs n'a aucun remplissage. Voir l'exemple d'écran de Firefox. Screen from Firefox

Une idée pourquoi c'est peut-être le cas?

Merci

Source

2017-08-01 Tamerlan Vahabzade

Pouvez-vous fournir votre code? –

Postez un [mcve] dans votre question s'il vous plaît. Les images sont belles mais nous préférons le code. – j08691

Cela peut aider à réinitialiser tout le style spécifique au navigateur pour sélectionner des éléments:

-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none;

Source

2017-08-01 19:47:54 nBuze

MISE À JOUR # 2 Sur la base de ma propre expérience, et ceux des utilisateurs sur Google forums, cela ne semble affecter les utilisateurs sur Windows 8 et Windows 10 affiche avec écrans tactiles. (S'il vous plaît ignorer ma précédente mise à jour re: de Windows 10 et la police mise à l'échelle)

Voir ici: Chrome Support Forum - Dropdown Option Height

Le css apparence ne fait rien pour y remédier (notez que si vous mettez les styles d'apparence sur l'élément de sélection , puis la flèche drop-arrow disparaît)

Voici quelques exemples de code - se produit uniquement sur mon ordinateur portable tactile, et uniquement dans Chrome. Toutes mes autres machines s'affichent correctement. IE et firefox rendent correctement dans toutes les machines.

<html> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
     html, page, body 
 
     { 
 
      padding:0; border:0; margin:0; 
 
      font-family:Tahoma, Verdana, sans-serif; 
 
      font-size:12px; 
 
     } 
 
     select { 
 
      padding: 0px 8px; 
 
     } 
 
     option { 
 
      -webkit-appearance:none; 
 
      -moz-appearance:none; 
 
      appearance:none; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div style="padding:20px;background-color:#887b93"> 
 
     <select name="vendorId" id="vendorId"> 
 
      <option value="">--- Select Vendor ---</option> 
 
      <option value="86">Alexandra</option> 
 
      <option value="5">Alix</option> 
 
      <option value="73">Anna</option> 
 
      <option value="19">Anne</option> 
 
      <option value="60">Avant</option> 
 
      <option value="65">Blue</option> 
 
      <option value="84">Blush</option> 
 
      <option value="21">Carol</option> 
 
      <option value="89">Christos</option> 
 
      <option value="43">Claire</option> 
 
      <option value="25">Cynthia</option> 
 
      <option value="54">Dauphines</option> 
 
      <option value="22">Delphine</option> 
 
     </select> 
 
    </div> 
 
</body> 
 
</html>

Source

2017-08-02 14:21:09

Voulez-vous dire que le bogue affecte seulement Win10 ou que le correctif ne concerne que Win10? Windows 8.1 souffre également du remplissage supplémentaire forcé. –

J'ai mis à jour avec des informations plus récentes –

Rembourrage supplémentaire dans l'élément de sélection de l'option en chrome

Répondre

Questions connexes