这样的下拉菜单用HTML怎么写?

这种灰色的我知道应该是select被disable了才这样,但是如果不disable的话,怎么让他显示的时候是这样的?(我们作业是给了一张图然后只用HTML和css让网页... 这种灰色的我知道应该是select被disable了才这样,但是如果不disable的话,怎么让他显示的时候是这样的?
(我们作业是给了一张图然后只用HTML和css让网页看上去和图片一模一样)所以就想知道如果不用disable,怎么写才能让网页一打开就是这样的显示?

谢谢!!!!!
展开
 我来答
ml4w5
推荐于2017-09-16 · TA获得超过1394个赞
知道小有建树答主
回答量:625
采纳率:25%
帮助的人:636万
展开全部

如果不用Javascript的话,实现是可以实现,就是浏览器兼容性方面会有问题,IE6和IE7下的效果很差。如下图,我用CSS3代码按照你给出的图片做的效果(Chrome浏览器):


下图是IE8浏览器下的效果:


整体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.select_diy {
border:2px solid #c1c1c1; 
border-bottom-color:#d0d0d0;
border-radius:5px; 
padding:8px; 
color:#999; 
font-weight:bold; 
font-size:18px; 
width:300px;
box-shadow: 0 2px 2px rgba(255,255,255,.4), inset 1px 0 5px rgba(0,0,0,.2);
background:#eaeaea;
background-image:-webkit-linear-gradient(top,#e7e7e7,#fcfcfc);
background-image:-moz-linear-gradient(top,#e7e7e7,#fcfcfc);
background-image:-ms-linear-gradient(top,#e7e7e7,#fcfcfc);
background-image:linear-gradient(top,#e7e7e7,#fcfcfc);
}
</style>
</head>
<body style="background:#f5f5f5">
<div style="width:350px; margin:50px auto">

<select class="select_diy">
<option>United States (+1)</option>
 </select>
 
 </div>
</body>
</html>
TableDI
2024-07-18 广告
在Excel中将表格转换为横向格式,可以采用以下方法:1. **使用“行列转换”工具**:点击“数据”选项,选择“行列转换”功能(或使用快捷键Ctrl + T),在弹出的窗口中设置源数据区域,并勾选“把行转换成列”选项,最后点击“确定”即可... 点击进入详情页
本回答由TableDI提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式