我想讓下拉插入符號可見，這目前沒有發生。我希望<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/[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 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>
uj5u.com熱心網友回復：
.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 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>uj5u.com熱心網友回復：
您的引導樣式正在覆寫您的 CSS。“最簡單”的解決方案（您也使用過）是添加!important到您的半徑。
但是使用!important不是一個好的選擇，因為您將來很可能希望覆寫自己的樣式。這給我們留下了 CSS 優先級。
tl;博士：
解決此問題的最簡單方法是為頁面上的某個根元素分配一個額外的任意 ID，如下所示： <body id="bootstrap-overrides">
這樣，您只需在任何 CSS 選擇器前加上您的 ID，立即為元素添加 100 點權重并覆寫 Bootstrap 定義。
基本上，每個選擇器都有自己的優勢：
行內 > ID 的 > 類/偽類 > 標簽/偽元素
在這兩種選擇器樣式中，瀏覽器總是會選擇權重較大的一種。只有當優先級相等時，樣式表的順序才重要——這就是為什么要覆寫 Bootstrap 并不容易。
您的選擇是檢查 Bootstrap 源，找出某些特定樣式是如何定義的，然后復制該選擇器，以便您的元素具有相同的優先級。但是在這個程序中，我們有點失去了所有 Bootstrap 的甜頭。
解決此問題的最簡單方法是為頁面上的某個根元素分配一個額外的任意 ID，如下所示： <body id="bootstrap-overrides">
這樣，您只需在任何 CSS 選擇器前加上您的 ID，立即為元素添加 100 點權重并覆寫 Bootstrap 定義。
（順便說一句 - 你也可以只打電話border-radius:50px;而不是打電話給每個角落，如果你想有幾個半徑，你可以打電話border-radius: 50px 10px 2px 0px（順時針））
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411135.html
標籤：
上一篇：Flexbox媒體查詢問題
下一篇：搜索文本行軍整個文本