1
votes

Modifier la taille de la police de la zone de sélection affecte la longueur des éléments d'option

J'ai besoin d'une sélection en html pour être rectangle et grande police. Donc, je change la taille de la police de l'élément sélectionné, mais si je la définis trop grand, cela affecte la largeur des options et cela a l'air terrible.

Dans le passé, j'ai utilisé SelectBoxIt , mais cela semble abandonné et n'a pas fonctionné à le tout avec la dernière jQuery.

Comment le réparer ou quelqu'un peut suggérer une alternative à SelectBoxIt , qui permet la même fonctionnalité?

Voici le code snippet:

    <select class="bigselect">
    <optgroup class="bigelements">
    
    <option>ä¹™</option>
    <option>ä¸™</option>
    <option class="afire">ä¸</option>
    <option>æˆŠ</option>
    <option>å·±</option>
    <option>åºš</option>
    <option>è¾›</option>
    <option>å£¬</option>
    <option>ç™¸</option>
    </optgroup>
    </select>

    .bigselect {
        font-size: 48px;
        width: 85px;
        height: 90px;
        max-width: 85px;
    }
    
    .bigelements {
        font-size: 1em;
        width: 85px;    
    }
    
    .afire
    {
        color: red;
    }

Et ici jsfiddle - https://jsfiddle.net/3rsLdhab/ p>

jquery html css select

1 commentaires

C'est le optgroup qui cause ce retrait à gauche.

3 Réponses :

-1
votes

<select class="bigselect">
                                   <optgroup class="bigelements bigselect">

<option>ä¹™</option>
<option>ä¸™</option>
<option class="afire">ä¸</option>
<option>æˆŠ</option>
<option>å·±</option>
<option>åºš</option>
<option>è¾›</option>
<option>å£¬</option>
<option>ç™¸</option>
</optgroup>
                                 </select>

.bigselect {
    font-size: 48px;
    width: 180px;
    height: 90px;
    max-width: 185px;
    text-align:center;
}
.bigelements {
    font-size: 1em;
    width: 85px;   
    
}

.afire
{
    color: red;
}

Veuillez essayer ceci ci-dessus. J'espère que cela vous aide. Merci. :)

1 commentaires

Non, j'ai besoin que la largeur de la sélection soit exactement 85px!

0
votes

est inutile pour vos besoins. La première sélection a l'attribut [label] :


<select class="bigselect">
  <optgroup label="bigelements">
    <option>ä¹™</option>
    <option>ä¸™</option>
    <option class="afire">ä¸</option>
    <option>æˆŠ</option>
    <option>å·±</option>
    <option>åºš</option>
    <option>è¾›</option>
    <option>å£¬</option>
    <option>ç™¸</option>
  </optgroup>
</select>

<select class="bigselect">
  <option>ä¹™</option>
  <option>ä¸™</option>
  <option class="afire">ä¸</option>
  <option>æˆŠ</option>
  <option>å·±</option>
  <option>åºš</option>
  <option>è¾›</option>
  <option>å£¬</option>
  <option>ç™¸</option>
</select>
.bigselect {
  font-size: 48px;
  width: 85px;
  height: 90px;
  max-width: 85px;
}

.bigelements {
  font-size: 1em;
  width: 85px;
}

.afire {
  color: red;
}

0 commentaires

1
votes

<select class="bigselect">
                                   <optgroup class="bigelements">

<option>ä¹™</option>
<option>ä¸™</option>
<option class="afire">ä¸</option>
<option>æˆŠ</option>
<option>å·±</option>
<option>åºš</option>
<option>è¾›</option>
<option>å£¬</option>
<option>ç™¸</option>
</optgroup>
                                 </select>

.bigselect{
   font-size: 48px;
    width: 85px;
    height: 90px;
    max-width: 85px;
          position :relative; 
    }
.bigselect  option{
  width:20px;
  height:20px;
  font-size:20px;
}


.afire
{
    color: red;
}

1 commentaires

Oui, merci de mettre à jour le violon pour tous jsfiddle.net/8s5onkz3