我已经能够更改select2框的高度并应用一些更改,但我现在的问题是select2框中的文本出现在选择框的中心,也出现在箭头的顶部.我只是不知道为什么?
在这里查看图像 https://i.stack.imgur.com/mckMI.jpg
在这里查看图像 https://i.stack.imgur.com/mckMI.jpg
.select2-container--bootstrap .select2-selection { -webkit-box-shadow: 0; box-shadow: 0; background-color: #fff; border: 0; border-radius: 0; color: #555555; font-size: 14px; outline: 0; min-height: 48px; }
解决方法
添加text-align:left;在你的.select2选择中,你必须有一个text-align:center;在父级中,所以添加此项以覆盖它:
text-align: left;
使用这个应该有帮助,这是所选选项文本的包装.
.select2-selection__rendered { margin: 10px; }
对于向下箭头使用:
.select2-selection__arrow { margin: 10px; }
$(function() { $('#myselect').select2({ placeholder: "select option",selectOnClose: true }); });
.select2-selection { -webkit-box-shadow: 0; box-shadow: 0; background-color: #fff; border: 0; border-radius: 0; color: #555555; font-size: 14px; outline: 0; min-height: 48px; text-align: left; } .select2-selection__rendered { margin: 10px; } .select2-selection__arrow { margin: 10px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script> <div style="margin:30px; height:400px;"> <select id="myselect" style="min-width:300px;"> <option></option> <option value='A'>A option thing</option> <option value='B'>B option thing</option> <option value='C'>C option thing</option> </select> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。