时间戳

首页 > 解决方案 > 如何在 Bootstrap 中删除选择框的圆角？

html - 如何在 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>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

将以下行添加到您的CSS文件中：

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

推荐阅读