如何在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>
4 个解决方案
解决方案1
0 2018-07-12 06:46:14
将以下行添加到您的CSS文件中：
.no-radius{
border-radius:0px !important;
}
解决方案2
0 2018-07-12 06:46:51
使用下面的代码（设置!important以防止覆盖）
border-radius为4px因为您设置为选择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>
解决方案3
0 2018-07-12 06:56:42
问题是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，整洁的想法！ 当然，这会使整个过程变得更简单。 相应地更新了我的小提琴 。
解决方案4
0 2018-07-12 07:37:41
使用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>
如何在 Chrome 和移动设备上删除音频标签的圆角？
[英]How to remove rounded corners of an audio tag on Chrome and mobile device?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.