Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select option padding not working in chrome

Tags:

html

css

Select option padding not working in chrome

<style> select option { padding:5px 0px; } </style>     <select> <option>1</option> <option>2</option> <option>3</option>  </select> 
like image 401
Piyush Marvaniya Avatar asked Mar 27 '14 07:03

Piyush Marvaniya


People also ask

How to give padding in select option?

For vertical padding you can use line-height. If you don't need border, you can specify border and make it the same color as the select element background, it will give you padding appearance. box-shadow can be used to add stroke to the element if really needed.

How do I style a selection dropdown in CSS?

There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.

How do you design select options in CSS Codepen?

You can also link to another Pen here (use the . css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.


2 Answers

I just found a way to get padding applied to the select input in chrome

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

Seems to work in the current chrome 39.0.2171.71 (64-bit) and safari (I only tested this on a mac).

This seems to remove the default styling added to the select input (it also removed the drop down arrow), but allows you to then use your own styling without chrome overriding it.

I stumbled across this fix while using code from here: http://fettblog.eu/style-select-elements/

like image 127
rmmoul Avatar answered Nov 16 '22 02:11

rmmoul


This simple hack will indent the text. Works well.

select {   text-indent: 5px; } 
like image 36
Matt Avatar answered Nov 16 '22 00:11

Matt