发表于: 2017-04-11 22:29:33

4 614


今天完成的事:继续编写了task10.


明天计划完成的事:把task10完成,开始task11.


遇到的问题:暂时没。


收获:去除浏览器下拉方式弄来弄去感觉不对,试了半天才做到效果。

针对select需要特别设置下,谷歌和火狐的样式居然显示起来都不一样..................

select {border: solid 1px #000;
 appearance:none;  
 -moz-appearance:none;  
 -webkit-appearance:none;
 background: url("bj.png") no-repeat scroll right center transparent;  
 padding-right: 14px;  
}  


之前自己试着放入一个父div来调试,虽然失败了,但上网查发现也是可以实现的,原理是为其添加一个父容器,容器是用来覆盖小箭头的,然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见,即可覆盖即小箭头。然后再为父级容器添加背景图片即可。overflow: hidden并不能隐藏下拉框的显示。

css样式:

[css] view plain copy

.aaaaa {  

 background: url('yourimage') no-repeat;  
  width: 100px;  
  height: 30px;  
  overflow: hidden;  
}  
  
.aaaaa select {  
  background: transparent;  
  border: none;  
  padding-left: 10px;  
  width: 120px;  
  height: 100%;  



返回列表 返回列表
评论

    分享到