CODEWITHSUNDEEP
cssdrop-down-menu
EdG
EdG

Reputation: 2351

Dropdown with border

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?

Upvotes: 1

Views: 14093

Answers (2)

Ayush Tomar
Ayush Tomar

Reputation: 11

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.

Upvotes: 1

Sman
Sman

Reputation: 145

Have you tried styling the select 

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

Upvotes: 2

Related Questions