Question

我想在我的项目中选择多个选择框。多个选择框正在工作，但我的设计不工作，这意味着我的CSS半径边框不工作。在下面，我为您提供代码：

$(document).ready(function(){
  $('#institute').multiselect({
      nonSelectedText: 'Select Institute',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      borderRadius: '8.4rem',
      buttonWidth:'500px',
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<div class="form-group">
    <label for="institute">Select:</label>
    <select id="institute" multiple class="form-control">
        <option>Select Trainning Institute</option>
        <option value="pt">Pt</option>
        <option value="A">A</option>
        <option value="it">IT</option>
    </select>
</div>

Answer 1

borderRadius没有bootstrap-multiselect选项。请尝试以下代码。

$('#institute').css({
    borderRadius: '8.4rem'
});

Answer 2

Js不适用于元素，因为#institute元素中没有边框半径。.边框半径应用于button.multiselect，因此要对其进行更改，请在js中添加此样式，

$(document).ready(function(){
  $('#institute').multiselect({
      nonSelectedText: 'Select Institute',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'500px',
  });
  $('.multiselect').css('border-radius','8.5rem');
});

参考演示： https://jsfiddle.net/jignashagpatel/csq9we25/2/

Answer 3

这是针对您的问题的更新代码。您没有选择直接在Bootstrap-Multiselect中设置边界半径的选项。

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
</head>
<body>
    <div class="form-group">
        <label for="institute">Select:</label>
        <select id="institute" multiple class="form-control">
            <option>Select Trainning Institute</option>
            <option value="pt">Pt</option>
            <option value="A">A</option>
            <option value="it">IT</option>
        </select>
    </div>
    <script>
        $(document).ready(function(){
          $('#institute').multiselect({
              nonSelectedText: 'Select Institute',
              enableFiltering: true,
              enableCaseInsensitiveFiltering: true,
              buttonWidth:'500px',
          });
          $('.multiselect').css('border-radius','8.5rem');
      });
    </script>
</body>
</html>

Answer 4

当我们要在js文件中使用CSS时，请使用.css函数

$('#institute').multiselect({
              nonSelectedText: 'Select Institute',
              enableFiltering: true,
              enableCaseInsensitiveFiltering: true,
              borderRadius: '40px',
              buttonWidth:'500px',
          });
          $('.multiselect').css({'border-radius':'8.4rem'});

在JavaScript中添加边框半径时不起作用

4 个答案: