Question

我想设置＆＃34;图标选择＆＃34;大于默认大小。我不知道如何在CSS中做到这一点。

我想更改此内容：

到这一个：

                             <select class="form-control">
                                    <option>test</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>

有人能帮助我吗？

Answer 1

尝试使用图标样式字体大小，就像在px中一样，它会使你的图标更大

.icon
{
fonts-size:20px /* as much as you want */
}

Answer 2

我知道这个问题的两个基本解决方法：

＆＃13;

/* 1st */
.form-control {
	width: 150px;
	padding: 2px;
	background-image: url(http://aki.ovh/dl/down.png); /* replace with anything */
	background-repeat: no-repeat;
	background-position: 98% center;
}
/* 2nd */
.container {
    width:150px; height:23px;
    overflow:hidden;
    border: 1px solid rgb(169, 169, 169);
	display: inline-block;
}
.form-control-2 {
    width:170px;
    padding:2px;
	border:none;
	outline: none !important;
	background-image: url(http://aki.ovh/dl/down.png); /* replace with anything */
	background-repeat: no-repeat;
	background-position: 130px center;
}

＆＃13;

<h2>1st<h2>
<div>
<select class="form-control">
<option>test</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<h2>2nd</h2>
<div class="container">
    <select class="form-control-2">
        <option>lorem</option>
        <option>ipsum</option>
        <option>dolor</option>
    </select>
</div>

＆＃13;

我希望其中一位能帮到你。

第一种解决方法以非常简单的方式工作。我们添加background的新图标涵盖了原始图标。由于此按钮在不同浏览器中的风格不同，我建议不使用此解决方案（仅在没有实体按钮的Chrome /浏览器中才能正常使用）。

第二种解决方法稍微复杂一点，因为它在overflow: hidden中使用.container隐藏了带有图标的原始部分，然后我们添加了带有background的新图标并进行了正确定位。

有关第二种解决方法的更多信息：here。

如何设置更大的选择图标

2 个答案: