How to append select with button with circular radius-CodePudding

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/[email protected]/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
                <div >
                  <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 >
                    <label  for="select02">
                      <button >Find tutor</button>
                    </label>
                  </div>
                </div>  

              </div>
</body>
</html>

CodePudding user response：

.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/[email protected]/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div>
                <div >
                  <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 >
                    <label  for="select02">
                      <button >Find tutor</button>
                    </label>
                  </div>
                </div>  

              </div>
</body>
</html>

CodePudding user response：

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))