我目前正在使用我创建的表单。表单有三个输入,前两个是下拉列表,最后一个输入是普通文本字段。这是我的表单HTML代码:
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="sendingfrom">
<select name="sendingfrom">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
</p>
<p class="sendingto">
<select name="sendingto">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
</p>
<p class="weight">
<input name="weight" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Weight" id="weight" />
</p>
</form>
</div>
</div>
我想通过使用CSS来定制表单的外观。然而,我的CSS编码似乎并没有影响下拉框的视觉效果,除了"权重"文本框。这是我应用于表单的CSS代码:
#form-div {
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 50px;
width: 500px;
float: left;
left: 471px;
position: absolute;
margin-top: 30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
top: -11px;
}
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #efefef;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #34495e;
color: #34495e;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:#bdc3c7;
}
我确信我在CSS编码上遗漏了一些东西,但我不确定如何纠正这个问题。我是HTML和CSS的新手,我正在努力学习这两个领域。如果这个问题太琐碎,我深表歉意。如果有人能帮我纠正我似乎正在经历的错误,我将不胜感激。
您需要通过CSS定位标记。
看看你的CSS,你并没有对select
元素这么做。
-
首先(为了简单起见)将类应用于元素(示例:
class="my-select"
)上下文:
<select name="sendingfrom" class="my-select"> <option value="africa">Africa</option> <option value="USA">USA</option> <option value="Australia">Fiat</option> <option value="Fiji">Fiji</option> </select>
-
然后通过CSS:瞄准它
.my-select { color: red; font-size: 14px; }
为select
元素设置样式是一个棘手的问题。不同浏览器的行为可能会有所不同,具体取决于你想做什么。
在整个测试过程中,我意识到至少需要在select
上设置border属性(或者给它一个类或id并引用它)。
select {
color: red;
border: 1px solid #000;
}
但它仍然不会接受所有内容(主要是颜色、高度、宽度和边框颜色),也不会应用于选择列表,或者至少不会应用于每个浏览器。
我建议你看一下Dropdown Default Styling这篇文章,详细讨论一下。
演示
CCD_ 5属性。
将一个元素覆盖在本机下拉箭头上,然后禁止其上的指针事件。
dev。W3.org
在WebKit和Gecko中运行良好。
html
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<label />
<select name="sendingfrom" class="my-select">
<option value="africa">Africa</option>
<option value="USA">USA</option>
<option value="Australia">Fiat</option>
<option value="Fiji">Fiji</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
css
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: blue;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
/*target non IE 9 and IE 10 as pointer events are not supported*/
.notIE label:after {
content:'';
width: 23px;
height: 23px;
position: absolute;
display: inline-block;
top: 4px;
right: 4px;
background: url(http://www.jewellerynetasia.com/portals/0/Images/social-network-service/google-plus.png) no-repeat right center white;
pointer-events: none;
}
/*target IE 9 and IE 10:*/
@media screen and (min-width:0 ) {
.notIE label:after {
display:none;
}
}
支持边界半径,如图所示。
源