0

I am trying to get a dropdown in particular style but I am not able to achieve it. This is what i want

enter image description here

I tried using <select> and Material UI's SelectField and applied border type to it's stype but that didn't work either. How can I get this border to work?

hungerstar
  • 20,438
  • 6
  • 45
  • 58
EdG
  • 2,121
  • 5
  • 40
  • 85
  • You just use `select {}` for styling select boxes. If you want it to be more specific, you'll need to provide your code. – Obsidian Age Feb 16 '17 at 21:07
  • see the first answer [here](http://stackoverflow.com/questions/38221983/border-bottom-for-select-box-option-not-working-on-chrome) on border issues with selects, and then see [this thread](http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript) for lots more details – Ian J Miller Feb 16 '17 at 21:13

2 Answers2

2

Have you tried styling the select 

select.dropdown {
  border: 1px solid black;
}
<select class="dropdown">
  <option selected value="1">Option 1</option>
</select>
Sman
  • 145
  • 8
1

This problem is very common yet you not created any div for the element select.

There are two ways you can do

  1. Add div to your element:-

<html>
<head> 
<style>
select.dropdown {
  border: 1px solid black;
}
</style>

<body>
<div>
<select class="dropdown">
  <option selected value="1">Option 1</option>
</select>
</div>
</body>
</html>
2) You can also use outline propety (no need of div) :- 

<html>
<head> 
<style>
select.dropdown {
  outline: 1px solid black;
}
</style>

<body>

<select class="dropdown">
  <option selected value="1">Option 1</option>
</select>

</body>
</html>

I guess that should help you.

Ayush Tomar
  • 11
  • 1