Select2下拉选择框的样式 [英] Styling of Select2 dropdown select boxes
问题描述
我在项目中使用Select2来对搜索表单中的一些选择框进行样式化。我设法改变箭头容器的渐变背景为黑色渐变:
I'm using Select2 in a project to style some select boxes in a search form. I managed to change the gradient background of the arrow container to a black gradient:
.select2-container .select2-choice .select2-arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
}
我希望箭头是白色的,但不幸的是Select2正在使用背景图像为不同的图标而不是字体awesome或类似的东西,所以没有办法只是改变CSS的颜色。
I would like the arrow to be white, but unfortunately Select2 is using a background image for the different icons instead of font-awesome or something similar, so there's no way to just change the color with CSS.
最简单的方法,箭头白色代替默认灰色?我真的必须用我自己的替换背景png(select2.png和select2x2.png)吗?或者有更简单的方法吗?
What would be the easiest way to make the arrow white instead of the default grey? Do I really have to replace the background png (select2.png and select2x2.png) with my own? Or is there an easier method?
另一个问题是如何更改选择框的高度。我知道如何改变下拉框在打开状态的高度,但我想改变在关闭状态下的选择框的高度。任何想法?
Another question I have is how to change the height of the select boxes. I know how to change the height of the dropdown box in opened state, but I want to change the height of the selectbox in closed state. Any ideas?
推荐答案
感谢评论中的建议。我做了一点脏的黑客来得到我想要的,而不必创建我自己的形象。使用javascript我首先隐藏用于向下箭头的默认标签,如下:
Thanks for the suggestions in the comments. I made a bit of a dirty hack to get what I want without having to create my own image. With javascript I first hide the default tag that's being used for the down arrow, like so:
$('b[role="presentation"]').hide();
然后我在我的页面中包含font-awesome,并添加了我自己的向下箭头, javascript,替换默认值:
I then included font-awesome in my page and add my own down arrow, again with a line of javascript, to replace the default one:
$('.select2-arrow').append('<i class="fa fa-angle-down"></i>');
然后使用CSS我样式的选择框。我设置高度,将箭头区域的背景颜色更改为渐变黑色,将宽度,字体大小以及向下箭头的颜色更改为白色:
Then with CSS I style the select boxes. I set the height, change the background color of the arrow area to a gradient black, change the width, font-size and also the color of the down arrow to white:
.select2-container .select2-choice {
padding: 5px 10px;
height: 40px;
width: 132px;
font-size: 1.2em;
}
.select2-container .select2-choice .select2-arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
width: 40px;
color: #fff;
font-size: 1.3em;
padding: 4px 12px;
}
结果是我想要的样式:
Update 5/6/2015
在另一个答案中提到的@Katie Lacy在Select2的版本4中更改了类名。具有新类名的更新的CSS应如下所示:
Update 5/6/2015 As @Katie Lacy mentioned in the other answer the classnames have been changed in version 4 of Select2. The updated CSS with the new classnames should look like this:
.select2-container--default .select2-selection--single{
padding:6px;
height: 37px;
width: 148px;
font-size: 1.2em;
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
width: 40px;
color: #fff;
font-size: 1.3em;
padding: 4px 12px;
height: 27px;
position: absolute;
top: 0px;
right: 0px;
width: 20px;
}
JS:
$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
这篇关于Select2下拉选择框的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!