西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发其它知识 → 在 Html 中用 CSS 来控制 select 标签

在 Html 中用 CSS 来控制 select 标签

相关软件相关文章发表评论 来源:本站整理时间:2011/3/18 11:59:32字体大小:A-A+

作者:佚名点击:500次评论:0次标签: Html

  • 类型:电子资料大小:3.9M语言:中文 评分:10.0
  • 标签:
立即下载

在 Html 中用 CSS 来控制 select 标签

在style里写上 width:px;这个可以实现. height:px; 这个就实现不了. 只能通过调整里面字体的大小来改变高度. background可以实现,但用背景图就不行了.

select的border是默认的蓝色, CSS用border属性是改变不了的. 只有通过伪装的方法才能让边框改变,下面详细介绍一下:

思路:先建一个带有预想边框的层, 在里面放上select,其中select的尺寸要比div稍微大一点,让超出层的内容隐藏从而遮盖住select自带的边框.

 

今天要做一个下拉菜单,发现菜单的CSS样式很少,达不到需求。然后上网找代码,大部分都是要用JS实现,而且代码非常多,就一个菜单就要我加那么多代码 - -,很显然我是不愿意干的。寻找了N久,找到了一份比较合适的,不过效果还没达到我的需要,因为有那个恶心的倒三角。然后稍加修改,终于把那个恶心的倒三角去掉了。




代码:

<head>

<style type="text/css">

.selectbox
{
border: 1px solid #C0C0C0;
width: 77px;
height: 16px;
clip: rect( 0px, 60px,16px, 0px );
overflow: hidden;
}
.selectbox2
{
position: relative;
border: 1px solid #F4F4F4;
width: 76px;
height: 15px;
clip: rect( 0px, 80px, 15px, 0px );
overflow: hidden;
}
select
{
position: relative;
left: -2px;
top: -2px;
width:97px;
line-height: 15px; color: #909993;
border-style: none;
border-width: 0px;
}

</style>

</head>

<body>

<div class = selectbox>

<div class = selectbox2>
<select size = "1" name = "D1">
<option>选择去向</option>
<option>后台管理</option>
</select>
</div>

</div>

</body>

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)