在JavaScript中添加边框半径时不起作用
[英]Border radius is not working when include it on javascript
问题描述
我想在我的项目中做多个选择框。 多个选择框正在工作，但我的设计不工作，这意味着我的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>
4 个解决方案
解决方案1
1 2019-08-26 06:21:40
bootstrap-multiselect borderRadius没有borderRadius选项。 请尝试以下代码。
$('#institute').css({
borderRadius: '8.4rem'
});
解决方案2
1 2019-08-26 06:21:55
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'); });
Refreence演示： https ： //jsfiddle.net/jignashagpatel/csq9we25/2/
解决方案3
0 2019-08-26 07:01:48
这是针对您的问题的更新代码。 您没有选择直接在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>
解决方案4
0 2019-08-26 07:05:34
当我们要在js文件中使用CSS时，请使用.css函数
$('#institute').multiselect({
nonSelectedText: 'Select Institute',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
borderRadius: '40px',
buttonWidth:'500px',
});
$('.multiselect').css({'border-radius':'8.4rem'});
div使用JavaScript动画时，内部边框半径不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.