怎么修改select option样式

 我来答
浪小客
高粉答主

2019-05-29 · 21世纪是需要思想碰撞的
浪小客
采纳数:1 获赞数:634909

向TA提问 私信TA
展开全部

1、首先看一下没有(background-color)属性的选择下拉框的效果。

代码:

<选择>

<option> 123 </ option>

<option> blue </ option>

<option>黄色</ option>

<option>红包</ option>

</选择>

2、要在选择下拉框中添加背景颜色,首先我们需要先编写样式样式,这样便于调用。

样式类样式代码:

<style type =“text / css”>

蓝色 {

背景色:蓝色;

颜色:#FFF;

red {

背景色:#E20A0A;

颜色:#FFF;

}

黄色 {

背景颜色:黄色;

颜色:#fff;

}

</样式>

3、此时,我们的选择下拉框调用样式类样式。

代码如下:

<选择>

<option> 123 </ option>

<option class =“blue”>蓝色</ option>

<option class =“yellow”>黄色</ option>

<option class =“red”>红包</ option>

</选择>

4、此时,我们将背景颜色添加到选择下拉框中。如下面的效果图。

滟丽00
高粉答主

2019-05-29 · 繁杂信息太多,你要学会辨别
知道答主
回答量:1487
采纳率:0%
帮助的人:24.2万
展开全部

1、首先我们打开html开发工具,新建一个html代码页面。

2、在html代码页面上创建一个select下拉菜单。

3、保存html代码页面,使用浏览器打开,这个时候我们发现select下拉菜单是可以点击修改的。

4、回到html代码页面,在select标签上添加disabled="disabled"属性。

5、保存html代码页面,回到浏览器页面上刷新页面,这个时候会发现select下拉菜单已经变为不可编辑修改了。

6、可以直接复制所有代码,粘贴到新建html页面保存后打开即可看到效果。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
2909305
2017-12-04 · 超过12用户采纳过TA的回答
知道答主
回答量:42
采纳率:0%
帮助的人:7.1万
展开全部

也遇到过,然后各种搜索。

之所以开发者很不容易自己修改,是因为 select option 有浏览器默认样式,且对自己的样式有一定的保护(基于css规则)。

这个保护就是 appearance 属性,浏览器内置的css样式是不允许更改的,日常开发仅是在它的样式基础上覆盖而已。

然而当设置 appearance: none 的时候,就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div,开发者就可以灵活设置样式了。(细节参考MDN:网页链接

而option还是略有不同,css规则暂时还未暴露更多的权限给开发者。 

是看一位热心网友回答才得知的, 暂只留下了他提供的代码:网页链接

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式