How to remove border of drop down list : CSS
The most you can get is:
select#xyz {
border:0px;
outline:0px;
}
You cannot style it completely, but you can try something like
select#xyz {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
HTML/CSS - remove/recolor border of dropdown options
The answer is: you can't because css can't modify options' style.
But you can use a list and make it act like a dropdown to be free to stylize it:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<label>One</label>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
<style>
ul {
display: table;
list-style: none;
padding: 0;
}
ul li {
display: block;
}
</style>
<script>
$("ul li").slideUp();
$("label").click(function () {
$("ul li").slideToggle();
});
$("ul li").click(function () {
$("label").text($(this).text());
$("ul li").slideToggle();
});
</script>
$("ul li").slideUp(); $("label").click(function () { $("ul li").slideToggle(); }); $("ul li").click(function () { $("label").text($(this).text()); $("ul li").slideToggle(); });
ul { display: table; list-style: none; padding: 0; }
ul li { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>One</label> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
Select box : remove borders
select#xyz
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
How to hide the border HTML CSS Select?
Here try this:
.cutom-select select:focus{
outline: none !important;
}
working example:
.custom-select{
font-family: Raleway;
font-size: 18px;
color: grey;
min-height: 75px;
width: 99%;
height: auto;
}
select{
min-width: 40px;
min-height: 40px;
width: 99%;
border: 0;
border-width: 0px;
box-shadow: 5px 5px 10px rgba(0, 40, 0, 0.5);
border-radius: 5px;
box-sizing: content-box;
}
select option:checked{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
select:active{
background-color: grey;
border-width: 0px;
box-sizing: content-box;
border: 0;
}
.cutom-select select:focus{
outline: none !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="cutom-select">
<select>
<option>India</option>
<option>India</option>
<option>India</option>
</select>
</div>
Related Topics
How to Set the Height of Vuetify Card
Align ≪Div≫ Elements Side by Side
Vertical Align Center in Bootstrap 4
How to Have Multiple Background Images Using Css
Stopping a Css3 Animation on Last Frame
Any Way to Declare a Size/Partial Border to a Box
Is the CSS Star Selector Considered Harmful (And Why)
Css 3 Slide-In from Left Transition
How to Override Vuetify Styles
Child Inside Parent With Min-Height: 100% Not Inheriting Height
How to Center an Absolutely Positioned Element in a Div
Reset/Remove CSS Styles For Element Only
Using Regular Expression in Css