如何用圆半径的按钮附加 select

Question

我想让下拉插入符号可见，目前还没有实现。我希望 <select> 和 <button> 都具有如图所示的圆半径。

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

Answer 1

您的 bootstrap 样式覆盖了您的 CSS。 “最简单”的解决方案（您也使用过）是将 !important 添加到您的半径中。但是使用 !important 不是一个好的选择，因为您很可能想要将来覆盖您自己的样式。这让我们有 CSS 个优先事项。

tl;博士:

解决这个问题的最简单方法是为页面上的根元素之一分配一个额外的任意 ID，如下所示：<body id="bootstrap-overrides">

这样，您只需在任何 CSS 选择器前加上您的 ID，立即为元素添加 100 点权重并覆盖 Bootstrap 定义。

基本上，每个选择器都有自己的优势：

内联 > ID > Classes/pseudo-classes > tags/pseudo-elements

在两种选择器样式中，浏览器总是会选择权重更大的一种。样式表的顺序仅在优先级相同时才重要 - 这就是为什么不容易覆盖 Bootstrap.

您的选择是检查 Bootstrap 来源，找出某些特定样式的确切定义方式，然后复制该选择器，以便您的元素具有同等优先级。但是在这个过程中我们有点失去了所有 Bootstrap 甜蜜。

解决这个问题的最简单方法是为页面上的根元素之一分配一个额外的任意 ID，如下所示：<body id="bootstrap-overrides">

这样，您只需在任何 CSS 选择器前加上您的 ID，立即为元素添加 100 点权重并覆盖 Bootstrap 定义。

（顺便说一句 - 你也可以只调用 border-radius:50px; 而不是调用每个角，如果你想要多个半径，你可以调用 border-radius: 50px 10px 2px 0px （顺时针））

Answer 2

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

如何用圆半径的按钮附加 select

How to append select with button with circular radius

html

javascript

css

bootstrap-4