I have a select element in an HTML page, I'd like to set its width to 100% (via CSS) but it doesn't work and the width only changes according to the width of the longest option. Only when I set a width in pixels, it works.
Is it possible to set the width in percentage? or is there a workaround?
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .
For the width attribute, you can also use percentages, where 100% is the total space available. So, if you wanted an image to be one quarter the width of the window, you could set width to 25% (one quarter of 100% is 25%). The height will be in proportion to the width if you do not set it as well.
If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
Check the parent element like where your select option is there. The width of the parent element is the constraint for the child. You need to increase the width of the parent first.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With