如何更改 bootstrap 网站中的下拉框边框半径。 （我正在使用 CodeIgniter 框架）

Question

我尝试使用 CSS 来更改下拉框的角半径。但是没有用。

这是我的看法。我需要将下拉框的角作为搜索栏或搜索按钮。

我的代码在视图文件中

.roundedCategory {
        border-top-left-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
        border-bottom-right-radius: 2rem !important;
    }

<div class="col-lg-3 form-cols">
  <div class="roundedCategory">
   <?php
     $where = array('status' => 1);
     $rows = get_records_where('ci_categories',$where);
     $options = array('' => trans('all_categories')) + array_column($rows,'name','id');
     echo form_dropdown('category',$options,'','class="form-control"');
     ?>
  </div>                    
</div>

Answer 1

为了获得圆角，您需要将 class 从 <div class="roundedCategory"> 更改为 echo form_dropdown('category',$options,'','class="form-control roundedCategory"');。 您需要在实际下拉列表中插入 class，在这种情况下，您的 echo 就是显示它的内容。您的代码不起作用的原因是您在 div 而不是下拉列表中添加了圆角，希望这能解决您的问题。

我也给你留下了我所说的例子。

.roundedCategory {
        border-top-left-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
        border-bottom-right-radius: 2rem !important;
    }

<div class="col-lg-3 form-cols">
  <div class="roundedCategory">
    <input type="text"><!--This one doesn't have the class -->
    <button class="roundedCategory">I have round borders</button><!--This one does-->
  </div>                    
</div>

Answer 2

注意：-在下拉列表中添加您的Class。

echo form_dropdown('category',$options,'','class="form-control roundedCategory"');