0

I'm trying to make dropbox or comboBox with select-option

I want to put space between select and first child(option).

enter image description here

I tried

          <select>
            <option style={{ marginTop: "100px" }} value="Test">test</option>
            <option value="Test">test</option>
          </select>

But failed.

Any ideas?

Molly
  • 1,887
  • 3
  • 17
  • 34
JillAndMe
  • 3,989
  • 4
  • 30
  • 57
  • 1
    With the default select element that a browser renders, you can't. Styling of those is very limited. You'd have to build your own instead. – Constantin Groß Oct 14 '19 at 09:39

1 Answers1

2

There are only a few style attributes that can be applied to an element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

Unfortunately, webkit browsers do not support styling of option tags yet.

you may find similar question here

  1. How to style a select tag's option element?
  2. Styling option value in select drop down html not work on Chrome & Safari

The most widely used cross browser solution is to use ul li

Hope that helps!!!!

Divneet
  • 648
  • 4
  • 18