关闭

智能手机网页开发笔记

标签: 手机网页select控件透明
640人阅读 评论(0) 收藏 举报
分类:

画面上有一个温度按钮,点击按钮时弹出温度选择的下拉框。

要求弹出的下拉框与select控件的下拉框一样。

实现方案:

在温度按钮上覆盖一个与温度按钮同样大小透明的select控件。

点击温度按钮时,实际上点击的是select控件。

代码如下:

<div style="width:220px;height:220px;background-image:url(button.jpg);overflow:hidden;">
<select style="width:240px;height:222px;border:none;margin-left:-1px;margin-top:-1px;color:transparent;background-color:transparent;-webkit-appearance: none;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>

关键点:

1、div的overflow要设为hidden。

2、select控件的宽度要大于div的宽度加上select控件的下拉箭头的宽度,这样才能隐藏select控件的下拉箭头。

3、select控件的高度为div控件的高度+2,marging-left,marging-top为-1px,保证select控件获得焦点时不会露馅。

4、select控件的前景色和背景色都要设为透明。

5、为了兼容浏览器,加上-webkit-appearance: none;

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:32759次
    • 积分:581
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:13篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论