How to Remove Border of Drop Down List:Css

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



Leave a reply



Submit