0
233
ViewsHow to append select with button with circular radius
I want to make the drop-down caret visible, which is not currently happening. I want both the <select> and <button> to have a circular radius as shown as in the image.
.top-select{
width: 70%;
padding-left: 10px;
border-top-left-radius: 50px !important;
border-bottom-left-radius: 50px !important;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.find-btn{
border: 1px solid;
border-top-left-radius: 50px !important;
border-bottom-left-radius: 50px !important;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.margin-appen{
margin-left: -43px !important;
}
.btn-tutor:focus{
box-shadow: none;
outline: none;
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
<div class="input-group mb-3">
<select class="select top-select" id="select02" >
<option selected>What do you want to learn</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append margin-appen">
<label class="input-group-text find-btn" for="select02">
<button class="btn btn-tutor">Find tutor</button>
</label>
</div>
</div>
</div>
</body>
</html>
2 answers
Answer question0
.input-group{
border-radius: 50px;
border:1px solid red;
overflow:hidden;
width:400px !important;
flex-wrap: nowrap !important;
}
.top-select,
.top-select:focus-visible{
border:none;
outline:none;
width:70%;
padding-left:15px;
}
.find-btn{
width:100%;
border: 1px solid red !important;
border-radius: 50px !important;
justify-content: center;
}
.margin-appen{
flex:1;
}
.btn-tutor:focus{
box-shadow: none;
outline: none;
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
<div class="input-group mb-3">
<select class="select top-select" id="select02" >
<option selected>What do you want to learn</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append margin-appen">
<label class="input-group-text find-btn" for="select02">
<button class="btn btn-tutor">Find tutor</button>
</label>
</div>
</div>
</div>
</body>
</html>0
your bootstrap styling is overriding your CSS. the "easiest" solution (that you also used) is to add !important to your radiuses.
BUT Using !important is not a good option, as you will most likely want to override your own styles in the future. That leaves us with CSS priorities.
tl;dr:
The easiest way to overcome this is to assign an additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">
This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element and overriding Bootstrap definitions.
Basically, every selector has its own strength:
inline > ID's > Classes/pseudo-classes > tags/pseudo-elements
Among the two selector styles, browsers will always choose the one with more weight. The order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
Your option is to inspect Bootstrap sources, find out how exactly some specific style is defined, and copy that selector so your element has equal priority. But we kinda lose all Bootstrap sweetness in the process.
The easiest way to overcome this is to assign an additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">
This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element and overriding Bootstrap definitions.
( btw - you can also just call border-radius:50px; instead of calling each corner, and if you would like to have several radiuses you can call border-radius: 50px 10px 2px 0px (clockwise))