簡體   English   中英

如何在Bootstrap中刪除選擇框的圓角?

[英]How to remove rounded corners of select box in Bootstrap?

我已經編寫了用於在引導程序中創建選擇框的這段代碼,但是我想刪除的拐角處是圓角。 怎么做? 我嘗試了很多,但是找不到任何解決方案。 請幫我。

這也是jsfiddle.net的鏈接

https://jsfiddle.net/ankitshri774/2redLfnc/7/

 body { background-color: #E8E8E8; } label { float: left; } #main_container { background-color: white; margin-left: 10px; padding-left: 13px; margin-right: 10px; padding-right: 13px; padding-top: 13px; margin-top: 10px; box-sizing: border-box; } #container { background-color: aqua; } .select-wrapper { border: 1px solid black; border-radius: 0px; } 
 <!doctype html> <html lang="en"> <head> <title>Master Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="masterpage1.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="main_container"> <form> <div id="partymaster"> <h3>Party Master</h3> <hr/> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label>Category <span style="color:red">*</span> </label> <span class="select-wrapper"><select name="category" class="form-control no-radius"> <option>A</option> </select> </span> </div> </div> </div> </form> </div> </body> </html> 

將以下行添加到您的CSS文件中:

.no-radius{
    border-radius:0px !important;
}

使用下面的代碼(設置!important以防止覆蓋)

border-radius4px因為您設置為選擇form-control類,默認情況下為bootstrap定義

.no-radius{
  border-radius: unset!important;
}

參見小提琴: https//jsfiddle.net/2redLfnc/29/

 body{ background-color:#E8E8E8; } label{ float: left; } #main_container{ background-color: white; margin-left: 10px; padding-left:13px; margin-right: 10px; padding-right:13px; padding-top: 13px; margin-top: 10px; box-sizing: border-box; } #container { background-color: aqua; } .select-wrapper{ border: 1px solid black; border-radius: 0px; } .no-radius{ border-radius: unset!important; } 
 <!doctype html> <html lang="en"> <head> <title>Master Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="masterpage1.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body > <div id="main_container"> <form> <div id="partymaster"> <h3>Party Master</h3> <hr/> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label>Category <span style="color:red">*</span> </label> <span class="select-wrapper"><select name="category" class="form-control no-radius"> <option>A</option> </select> </span> </div> </div> </div> </form> </div> </body> </html> 

問題是form-control -class的半徑設置為4px。 因此,您不能在同一元素上用不同的類覆蓋它(至少我不知道該怎么做)。 因此,作為快速解決方案,我定義了一個不同的form-control-without-radius並在更新后的fiddle中使用了它。

.form-control-without-radius {
  display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
} 

但是,這是整個布局的根本變化,我想它會與許多其他UI組件發生沖突。 因此,您可能必須構建自己的自定義Bootstrap。 有人發現使用sass很容易,我使用Bootstrap Theme Builder玩得更開心。 還有其他的。 如果您對BT不太熟悉,這聽起來像一個可怕的想法-但我的經驗僅是積極的,所以我會繼續嘗試;-)

更新 :我在其他帖子中看到了未unset !important -idea,整潔的想法! 當然,這會使整個過程變得更簡單。 相應地更新了我的小提琴

使用rounded-0但僅在Bootstrap-4使用。

 body { background-color: #E8E8E8; } label { float: left; } #main_container { background-color: white; margin-left: 10px; padding-left: 13px; margin-right: 10px; padding-right: 13px; padding-top: 13px; margin-top: 10px; box-sizing: border-box; } #container { background-color: aqua; } .select-wrapper { border: 1px solid black; border-radius: 0px; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <div id="main_container"> <form> <div id="partymaster"> <h3>Party Master</h3> <hr/> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label>Category <span style="color:red">*</span> </label> <span class="select-wrapper"> <select name="category" class="form-control rounded-0"> <option>A</option> </select> </span> </div> </div> </div> </form> </div> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM