我有一个问题,我需要帮助...
作为家庭作业,我必须做些什么。我必须制作一个简单的HTML / CSS / Bootstrap酒店房间预订页面。有一种形式,我真的不知道如何制作它。 其中一个表单是选择选项下拉按钮。他们希望我制作一个比正常箭头更大的箭头,而且我不知道如何让这个箭更大。
在此处发布我的代码:
HTML
<label class="control-label">Nationality</label><br>
<select class="options izbor" name="country">
<option value="България">Bulgaria</option>
<option value="Румъния">Germany</option>
<option value="Гърция">Russia</option>
<option value="Сърбия">England</option>
</select>
CSS
.izbor {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #b7b7b7;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
答案 0 :(得分:4)
尝试这种快速简便的方法,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 96% !important;
}
select::-ms-expand { display: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
答案 1 :(得分:1)
我为你创建了这个代码,它隐藏了默认箭头,而是放了另一个图像。我选择的图像有点愚蠢,因为它包含一些文字,但你可以替换使用更好的东西。
.izbor {
display: block;
width: 90%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #b7b7b7;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
select.izbor{
border: 1px solid red;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://upload.wikimedia.org/wikipedia/en/5/57/DownArrow.png);
overflow: hidden;
background-repeat: no-repeat;
background-size: 80px 30px;
background-position: right;
}
<label class="control-label">Nationality</label>
<br>
<select class="options izbor" name="country">
<option value="България">Bulgaria</option>
<option value="Румъния">Germany</option>
<option value="Гърция">Russia</option>
<option value="Сърбия">England</option>
</select>