文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用CSS和Div美化select样式

2024-04-02 19:55

关注

本篇内容主要讲解“怎么用CSS和Div美化select样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS和Div美化select样式”吧!

来直接看这个示例:

CSS Code复制内容到剪贴板

  1. .select { margin: 0; padding: 0; border:1px solid #cccccc; float: left; display: inline; }   

  2. .select div { border:1px solid #f9f9f9; float: left; }   

  3. .select>div { overflow: hidden; }   

  4. * html .select div select { display:block; float: left; margin: -2px; }   

  5. .select div>select { display:block; float:none; margin: -2px; padding: 0px; }   

  6. .select:hover { border:1px solid #666; }   

HTML

XML/HTML Code复制内容到剪贴板

  1. <div class="select">  

  2.     <div>  

  3.         <select>  

  4.             <option>看见效果了吧</option>  

  5.             <option>看见效果了吧</option>  

  6.             <option>看见效果了吧</option>  

  7.         </select>  

  8.     </div>  

  9.     <div>  

看演示吧
demo

然后介绍一下全兼容select的写法

先看下select属性表
怎么用CSS和Div美化select样式

通过上述的研究成果属性汇总,我们知道IE6是无论如何设置都是固定高度为22px不变的,而其他浏览器除safari都是支持height属性的,那么我们设置 height:22px。那么现在我们修正一下safari浏览器,,我们发现仅有safari支持line-height属性那么正好可以利用line-height修正其高度为22px,在font-size为12px的前提下设置 line-height:22px,最后FF和IE9里面的文字不居中,对其设定 padding:2px 0,我们发现FF和IE9都居中了,但是各个浏览器的select的高度也并没有增加,那么这里有点疑问,在高度设定的情况下,小量数字的padding不增加整体高度?

下面是全兼容代码示例。

 

CSS Code复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

  2. <html xmlns="http://www.w3.org/1999/xhtml">   

  3. <head>   

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

  5. <title>demo</title>   

  6. <style>   

  7. *{padding:0; margin:0}   

  8. body{font-size:12px}   

  9. select{height:22px; line-height:18px; padding:2px 0}   

  10. </style>   

  11. </head>   

  12. <body>   

  13. <div style="margin-top:20px; margin-left:20px; background:#000">   

  14. <select>   

  15.     <option>演示问题一</option>   

  16.     <option>演示问题二</option>   

  17.     <option>演示问题三</option>   

  18.     <option>演示问题四</option>   

  19.     <option>演示问题五</option>   

  20. </select>   

  21. </div>   

  22. </body>   

  23. </html>  

到此,相信大家对“怎么用CSS和Div美化select样式”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯