Vraag Selecteer optie opvulling werkt niet in chrome


Selecteer optie opvulling werkt niet in chrome

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</select>

47
2018-03-27 07:43


oorsprong


antwoorden:


Ik heb zojuist een manier gevonden om opvulling toegepast op de select invoer in chroom

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

Lijkt te werken in de huidige chrome 39.0.2171.71 (64-bit) en safari (ik heb dit alleen op een mac getest).

Dit lijkt de standaardstijl te verwijderen die aan de geselecteerde invoer is toegevoegd (deze heeft ook de vervolgkeuzepijl verwijderd), maar biedt u de mogelijkheid om uw eigen stijl te gebruiken zonder dat Chrome deze overschrijft.

Ik ontdekte deze fix tijdens het gebruik van code van hier: http://fettblog.eu/style-select-elements/


74
2017-12-16 15:48



Deze eenvoudige hack zal de tekst laten inspringen. Werkt goed.

select {
  text-indent: 5px;
}

14
2017-08-23 11:03



Het lijkt erop dat

Helaas ondersteunen webkit-browsers nog geen styling van optietags.

je kunt hier een soortgelijke vraag vinden

  1. Hoe het optie-element van een select-tag te vormen?
  2. De waarde van de optiestijl in de vervolgkeuzelijst html werkt niet in Chrome en Safari

De meest gebruikte crossbrowser-oplossing is om ul li te gebruiken

Hoop dat het helpt!


6
2018-03-27 07:49



Dat is geen werk aan optioninvoer, omdat het een door het systeem gegenereerde vervolgkeuzelijst is maar u kunt de padding van een select.

Reset gewoon de box-sizing eigendom aan content-box in je CSS.

De standaardwaarde van select is border-box.

select {
 box-sizing: content-box;
 padding: 5px 0;
}

5
2017-12-12 16:58



Heel, ZEER eenvoudig idee, maar je kunt het dienovereenkomstig aanpassen. Dit is niet opgezet om er goed uit te zien, alleen om het idee te geven. Hoop dat het helpt.

CSS:

ul {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    display: block;

}

li {
    padding: 5px 0px;
    width: 50px;
    display: none;

}

HTML:

<ul id="customComboBox">
&nbsp
    <li>Test</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

Script:

$(document).ready(function(){
    $("#customComboBox").click(function(){
        $("li").toggle("slow");
    });
});

DEMO


4
2018-03-27 08:28



Ik heb het met dit opgelost

select {
    max-height: calc(1.2em + 24px);
}


max-height: calc(your line height + top/bottom padding);

1
2018-04-28 11:07



Je kunt gebruiken font-size eigendom voor optie als je nodig hebt.


0
2018-03-07 08:55



Ik heb een trucje voor je probleem. Maar daarvoor moet je javascript gebruiken. Als je hebt gedetecteerd dat de browser Chrome-invoeging is "pop"opties tussen alle opties. Geef een nieuwe klasse voor die"pop"opties en maak ze uitgeschakeld. De hoogte van"pop"opties waarmee u kunt definiëren lettertypegrootte eigendom.

CSS:

option.dummy-option-for-chrome {
  font-size:2px;
  color:transparent;
}

Script:

function prepareHtml5Selects() {

  var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
  if(!is_chrome) return;

  $('select > option').each(function() {
    $('<option class="dummy-option-for-chrome" disabled></option>')
     .insertBefore($(this));
  });
  $('<option class="dummy-option-for-chrome" disabled></option>')
    .insertAfter($('select > option:last-child'));
}

0
2018-01-31 08:47



U moet gericht zijn op select voor uw CSS in plaats van de geselecteerde optie.

select { 
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

Bekijk dit artikel Styling Selecteer Box met CSS3 voor meer stylingopties.


-8
2018-03-27 07:52