如何在Bootstrap中删除选择框的圆角？
[英]How to remove rounded corners of select box in Bootstrap?
问题描述
I have written this code for creating a select box in bootstrap but the corners are coming rounded which i want to remove. 
我已经编写了用于在引导程序中创建选择框的这段代码，但是我想删除的拐角处是圆角。 How to do so? 怎么做？ I tried a lot but could not find any solution for this. 我尝试了很多，但是找不到任何解决方案。 Please help me. 请帮我。
Here is the link of jsfiddle.net also 这也是jsfiddle.net的链接
https://jsfiddle.net/ankitshri774/2redLfnc/7/ 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>
4 个解决方案
解决方案1
0 2018-07-12 06:46:14
Add the below line to your CSS file: 将以下行添加到您的CSS文件中：
.no-radius{
border-radius:0px !important;
}
解决方案2
0 2018-07-12 06:46:51
Use code below(set !important to prevent override) 使用下面的代码（设置!important以防止覆盖）
The border-radius is 4px because you set to select form-control class and it is bootstrap definition by default border-radius为4px因为您设置为选择form-control类，默认情况下为bootstrap定义
.no-radius{
border-radius: unset!important;
}
See fiddle: https://jsfiddle.net/2redLfnc/29/ 参见小提琴： 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>
解决方案3
0 2018-07-12 06:56:42
The problem is that the form-control -class sets a radius of 4px. 问题是form-control -class的半径设置为4px。 So you can't overwrite it with a different class on the same element (at least I would not know how to that). 因此，您不能在同一元素上用不同的类覆盖它（至少我不知道该怎么做）。 So as a quick fix, I have defined a different class form-control-without-radius and am using that in my updated fiddle . 因此，作为快速解决方案，我定义了一个不同的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;
}
However, this is a fundamental change of the entire layout, and I guess it would collide with many other UI-Components. 但是，这是整个布局的根本变化，我想它会与许多其他UI组件发生冲突。 So you may have to build your own custom Bootstrap. 因此，您可能必须构建自己的自定义Bootstrap。 Some people find it easy to do with sass , I had more fun using the Bootstrap Theme Builder . 有人发现使用sass很容易，我使用Bootstrap Theme Builder玩得更开心。 And there are others as well. 还有其他的。 If you're not familiar enough with BT, this may sound like a scary idea - but my experience doing so has been only positive, so I'd go for it ;-) 如果您对BT不太熟悉，这听起来像一个可怕的想法-但我的经验仅是积极的，所以我会继续尝试;-)
Update : I saw the unset !important -idea in other posts, neat idea! 更新 ：我在其他帖子中看到了未unset !important -idea，整洁的想法！ That make the whole thing simpler, of course. 当然，这会使整个过程变得更简单。 Have updated my fiddle accordingly. 相应地更新了我的小提琴 。
解决方案4
0 2018-07-12 07:37:41
Use rounded-0 but in Bootstrap-4 only. 使用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.