2013-02-25 97 views
2

我为网站制作了一个表单,除了选择下拉框外,所有文本框都有圆角。我做了一个圆形的盒子风格,它显示出来,但原来的正方形也显示在它后面。有什么办法可以删除这个,所以我是唯一显示的。我将添加代码删除选定标签上的边框

<td>Service Requested: 
     <select style="margin-left: 10px" name="service" tabindex="4"> 
      <option value=" " selected="selected"> </option> 
      <option value="Residential Move">Residential Move*</option> 
      <option value="Commercial Move">Commercial Move*</option> 
      <option value="Storage Unit Loading">Storage Unit Loading</option> 
      <option value="Storage Unit Unloading">Storage Unit Unloading</option> 
      <option value="Furniture Consignment">Furniture Consignment</option> 
      <option value="Assembly/Removal">Assembly/Removal</option> 
      <option value="Landscaping">Landscaping</option> 
      <option value="Cleanout">Cleanout</option> 
      <option value="General Help">General Help</option> 
     </select> 
</td>   

这是整个表单的整个CSS。只要有它

#searchbox { 
padding-left: 190px; 
padding-bottom:40px; 
background: url(../images/border-dashed.gif) repeat-x left bottom; 
} 

#searchbox form { 
margin: 0; 
} 

#searchbox table { 
margin: 0; 
} 

#searchbox th, td { 
text-align: left; 
font-weight: normal; 
color:#302f2f; 
} 

#searchbox .submitrow { 
text-align: right; 
} 

#search { 

} 

#search input[type="text"] { 
    border: 2px solid #c1c2c3 ; 
    font: bold 12px Arial,Helvetica,Sans-serif; 
    color: #302f2f; 
    width: 100px; 
    padding: 6px 15px 6px 15px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 
} 

#search input[type="text"]:focus { 
    width: 150px; 
} 

#search select { 
    border: 2px solid #c1c2c3 ; 
    font: bold 12px Arial,Helvetica,Sans-serif; 
    color: #302f2f; 
    width: 200px; 
    padding: 6px 15px 6px 15px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 
} 

#search select:focus { 
    width: 250px; 
} 

#search textarea { 
    border: 2px solid #c1c2c3 ; 
    font: bold 12px Arial,Helvetica,Sans-serif; 
    color: #302f2f; 
    width: 300px; 
    padding: 6px 15px 6px 15px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 
} 

#search textarea:focus { 

} 


.contactwrapper {width:auto; height:200px; overflow:hidden;} 
.extra-wrap {width:800px; overflow:hidden;} 




.formbtn { 
background: url(../images/formbtns.png) no-repeat; 
background-position: 0 bottom; 
color: #f1f2ea; 
display: block; 
line-height: 28px; 
float:right; 
margin-left:450px; 
margin-bottom:40px; 
height: 30px; 
width: 100px; 
margin: 48px 10px; 
outline: 0; 
text-align: center; 
text-decoration: none; 
} 
.formbtn:hover { 
background-position: 0 top; 
} 

感谢

回答

4

样式选择框的能力是跨浏览器不一致。其中一些对CSS样式有很好的反应,有些则没有,但是如果你真的想完全一致地控制它和它的行为,你需要做一个由javascript支持的人造选择。

查看Select2 control,很好。

+0

伟大的东西人!谢谢! – user2108641 2013-02-25 20:04:44

+0

非常酷,感谢分享 – 2013-02-25 20:30:09

+0

我去了那里,但它并没有改变我的输出。想知道是否有另一种替代 – user2108641 2013-02-25 20:38:03

0

我找到了一个替代方案,但不知道它如何与所有浏览器一起工作。但是,如果您将边框属性更改为继承,则会执行此操作。至少在Chrome中

border:2px inherit#c1c2c3;

+0

适用于Firefox和Chrome。尝试在Safari和IE现在 – user2108641 2013-02-25 21:06:57

+0

好吧,我试过在IE和Safari。每个人看起来都不一样,但圆度是一致的。我确定。无论如何,感谢您的帮助 – user2108641 2013-02-25 21:13:10