select下的option的框怎么去掉

最新推荐文章于 2024-08-19 21:44:19 发布

你的美，让我痴迷

最新推荐文章于 2024-08-19 21:44:19 发布

阅读量2k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_45932157/article/details/115391212

版权

这段CSS代码主要用于清除select元素的默认边框样式，避免在不同浏览器间出现样式差异。同时，隐藏了option的下拉箭头，以及设置了option选中时的背景色和字体颜色。适用于前端开发中的表单样式统一。

摘要由CSDN通过智能技术生成

select {
   
    /*清除select的边框样式 */
    border: none;
    /*清除select聚焦时候的边框颜色*/
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
option:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

你的美，让我痴迷

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

layui中清空指定select_layui中select的option叠加问题

weixin_39612733的博客

12-20

2120

在使用layui，在select的地方遇到了坑，select里的值居然无法清空，select里的option还有叠加问题，为了解决这个问题，也达到我的功能，我研究了下，让有同样需求的小伙伴不踩坑，特贴上我的源码：layui-下拉框联动测试选择框时间金额选择框请选择规则名称确定//后台传过来的数据var data=[{unitType:0,ruleName:'时间规则11',amount:1100,...

html query动态为select加入选项,HTML标签 select 里动态添加option

weixin_29696999的博客

06-07

1513

HTML标签 select 里动态添加option:☆ var today = new Date();var yearNow = today.getFullYear();var optiongYears_className = [yearNow, yearNow+1];var $selyear = $("select#classNameYear_add");$.each(optiongYe...

3 条评论您还未登录，请先登录后发表或查看评论

select标签边框的颜色select标签边框的颜色

04-19

select标签边框的颜色select标签边框的颜色

iview---去掉select选择器默认边框

weixin_51409660的博客

08-27

1278

这是iview官方组件库的选择器，都是有一跳灰灰的边框，想要去掉，但设置border：0没有效果我是这样做的： 1、首先添加一个你相中的select选择器，给他设置个class，这个很重要！！！ <Select v-model="model2" style="width:100px" class="company-select" > <Option v-for="item in cityList" :value="item.value" :ke...

如何更改select option边框颜色和选中的颜色

最新发布

ZDFXN的博客

08-19

274

【代码】如何更改select option边框颜色和选中的颜色。

学习在html中使用css去掉select自带的边框和小三角

徊忆羽菲

09-29

2653

学习在html中使用css去掉select自带的边框和小三角

html+css 去掉select自带的边框和小三角

信徒博客

04-16

1万+

css代码 #selected{ width: 100%; height: 100%; background-color: #f54545; color: white; /* 去掉三角 */ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */ /...

选择select框下option的值

WangJiangNan17214的博客

09-04

624

Document --请选择-- this is content zero; this is content one; this is content two; this is content three;

CSS自定义select下拉选择框的样式(不用其他标签模拟)

09-25

本文主要讲述了如何使用纯CSS技术自定义select下拉选择框的样式，目的是覆盖掉浏览器默认的样式。虽然直接使用CSS难以完全解决自定义样式的问题，因为某些浏览器的默认样式在兼容性方面难以处理，但本文还是提供了一...

el-select聚焦去掉option边框

07-13

您可以通过自定义样式来实现去掉 `el-select` 组件中 `option` 的边框。您可以在 `el-select` 组件的外部包裹一个自定义的样式类，然后使用 CSS 来修改 `option` 的样式。下面是一个示例： HTML： ```html ...

改变select组件默认样式及option背景色

lyn1772671980的博客

04-04

5万+

1.清除select组件原有样式-webkit-appearance: none; /* google */ -moz-appearance: none; /* firefox */ appearance: none; /* IE */2.设置新样式及option背景色background: #080F17 url(../../common/image/triangel.png)...

去除select边框和三角-----appearance:none

Bright2017的博客

06-24

3890

隐藏select边框

Chrome浏览器的下拉选择框option有黑边的问题

qq_38848210的博客

06-03

2638

在开发中发现突然项目的选择框都有了黑框，开始以为是动了项目样式，经过排查发现是chrome的默认样式导致，原来是Chrome浏览器进行了更新 Chrome浏览器83版本对选择框进行了更新，而且我们无法修改到到option该样式（如果你们修改了可以评论方法）该问题已经当做问题提交到了Chrome，在Chrome84 Dev中已经将该问题解决，所以我们可以等84版本恢复样式。 ...

CSS：改变select、option标签的默认样式

热门推荐

golden_wheat

03-27

5万+

CSS：select标签、option标签 select标签和option标签是自带有CSS样式的 1、用纯CSS方式去除默认的select标签方法一：

修改select及option的样式

qq_43654065的博客

07-28

1万+

html <select class="select"> <option value="volvo" disabled>Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</opti.

html + css去掉 select默认下拉箭头和边框

qiqilovehcy的博客

12-27

3372

#selected{ width: 100%; height: 100%; background-color: #f54545; color: white; /* 去掉三角 */ appearance:none; -moz-appearance:none; /* 兼容Firefox */ -webkit-appearance:none; /* 兼容Safari 和 Chrome */ /* 去掉边...

去除select下拉框的边框和三角下标

qq_33745371的博客

03-10

4236

去除select下拉框的边框和三角下标效果图核心css代码 /*去除select边框*/ border: 0; background: transparent; /*去除下拉框的三角下标*/ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */

select下拉框默认option为灰色，选中option颜色为白色

祈澈菇凉

09-08

9898

select下拉框默认option为灰色，选中option颜色为白色代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <scrip...