How do I style form drop down lists?
As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Combobox though.
How do I style a select dropdown with only CSS?
Here are three solutions:
Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)
--
To hide the default arrow set appearance: none
on the select element, then add your own custom arrow with background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Browser Support:
appearance: none
has very good browser support (caniuse) - except for Internet Explorer.
We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.
To at least undo our custom arrow - leaving the default select arrow intact.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
All together:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
How to style drop down list?
Check this out - http://bavotasan.com/2011/style-select-box-using-only-css/
html
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
css
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
For more elaborate styling you need to use javascript - like this http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
How do I style child elements of a drop down list in a Symfony form
You can use the choice_attr option:
->add('qualifications', EntityType::class, [
'class' => Tag::class,
'multiple' => true,
'expanded' => true,
'required' => false,
'placeholder' => 'Select...',
'choices' => $this->tagsService->getTagsQualificationLevels(),
'attr' => [
'class' => 'form-control-ajax-submit-on-change w-20',
],
'choice_attr' => function($choiceValue, $key, $value) {
return ['class' => 'my_custom_choice_class'];
},
])
How to correctly customize the drop-down menu created by ul-li tags?
Change your css a bit like
OLD CSS
#select-ul {
display: block;
cursor: pointer;
border: 0.1px solid rgba(0, 0, 0, .1);
border-top: 0;
background-color: white;
padding: 12px;
height: 300px;
overflow: auto;
float: none;
overflow-y:scroll;
}
NEW CSS
#select-ul {
z-index: 1;
display: none;
position: absolute;
width: 100%; /* you can change but must give width */
max-height: 300px;
cursor: pointer;
border: 1px solid #e5e5e5; /* 0.1px doesn't work */
border-top: 0;
padding: 12px;
background-color: white;
overflow: hidden scroll;
}
#select-ul.active {
display: flex;
flex-direction: column;
}
And a bit JavaScript convert it in vue
as you are using it.
const dropdown = document.querySelector('#select-ul');
dropdown.addEventListener('click', () => {
dropdown.classList.add('active'); // you can also use toggle
});
// additionally
dropdown.addEventListener('blur', () => {
dropdown.classList.remove('active');
});
Lemme know if this work! TBH I am not getting what scaling issue you are talking about. *elaborate it some more.
Related Topics
Using Proper CSS Media Queries in Angular
How to Get a Rotated Linear Gradient Svg for Use as a Background Image
Chrome Devtools Converts All Hex Colors to Rgb
Incorrect Vertical Alignment in Ie8
Why Does Bootstrap Include a Bootstrap-Theme File
CSS Text-Align: Center; Is Not Centering Things
CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally
Any Programs to Generate CSS Classes from Your HTML
How to Set Element Height for a Fixed Number of Lines of Text
Creating a Fuzzy Border in CSS 3
2-Column CSS Responsive Layout with a Responsive Image
Navigation Tabs with Jquery Mobile Similar to Google Play Store
How to Use Pseudo Selectors in Material-Ui