怎么去掉select边框和小三角,appearance用法

最新推荐文章于 2022-07-06 08:46:26 发布

转载最新推荐文章于 2022-07-06 08:46:26 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/qimhkaiyuan/blog/1544006

文章标签：

#python

本文介绍了一种使用CSS来隐藏HTML中select元素的默认边框和下拉箭头的方法，适用于多种浏览器，包括Firefox、Safari和Chrome等。通过设置appearance、-moz-appearance及-webkit-appearance属性为none实现外观自定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

select隐藏边框和小三角行的css 代码：

.select{
	border:none;
	overflow: hidden; 
	appearance:none;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari 和 Chrome */
}

CSS3 appearance 属性解释：http://www.w3school.com.cn/cssref/pr_appearance.asp

转载于:https://my.oschina.net/qimhkaiyuan/blog/1544006

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33958585

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

自定义select 三角样式

东方佑

05-10

12万+

select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/st

asp.net menu控件的那个黑色小三角箭头怎么去掉？

07-06

1852

解决方法： menu控件的属性StaticEnableDefaultPopOutImage = false

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

一个select元素自定义设计的新思路：appearance: none之后利用<>符号制造小箭头

weixin_30484739的博客

05-10

267

最近工作时解决了一个前端小问题（如下图所示）：在Safari中，select的控件之上有不和谐的灰色部分。刚开始时我以为是backgrand或是border设置不当之类产生的问题，在搜索了很久之后终于找到了问题所在：这个灰色部分来自于Safari默认的select设计，所以我需要用appearance: none来去除默认设计，但是这样一来，右侧的小箭头就会消失。本文将会详细描述我是如何添加...

取消select的默认样式的向下箭头和设置select默认字样

super码力的博客

07-06

1947

取消select的默认样式的向下箭头和设置select默认字样请选择且不出现在选项中

css中appearance:none修改select option样式

lianflower的博客

08-27

1761

https://www.xinran001.com/frontend/145.html select option有浏览器默认样式，且对自己的样式有一定的保护（基于css规则）。这个保护就是appearance属性，浏览器内置的css样式是不允许更改的，日常开发仅是在它的样式基础上覆盖而已。然而当设置 appearance: none 的时候，就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div，开发者就可以灵活设置样式了。 ...

去除下拉选择框边框和倒三角标志

07-11

如果你想去除下拉选择框的边框和倒三角标志，你可以使用CSS的各种属性来实现。下面是一个示例，展示了如何去除下拉选择框的边框和倒三角标志： ```css .my-select { /* 去除边框 */ border: none; /* 去除倒...

select自定义下拉三角符号,css样式小细节

weixin_30485379的博客

08-10

1557

本来没有写文章的习惯，但是闲下来了，整理资料，发现还挺纠结，对前端来说。所以整理下，希望对看到的人有所帮助，毕竟我不是前端开发。起因，是前端告诉我select 框的三角箭头不能自定义。但是第二次的时候，以我自己的感觉中，是可以自己定义的，于是网上找到了这部分资料。然后自己分享处理吧。知道大家都喜欢完整的demo,所有直接粘贴吧。 <!DOCTYPE html&g...

css 下拉菜单上面的三角

02-14

这里的关键在于 `.select::after` 中设置了三个方向透明而顶部不透明的边框宽度，从而形成了一个小三角形作为视觉提示符。当鼠标悬停或者其他交互事件触发时，还可以进一步增强用户体验，比如改变颜色或者旋转角度...

如何让下拉框select，鼠标悬浮显示全部内容，hover显示，after与before应用

最新发布

07-29

如果想要双层效果（比如带边框的箭头），可以再添加一个::after伪元素，设置比::before稍小且颜色不同的三角形，并调整位置覆盖，但通常一个箭头就够了。 ### 3. JavaScript交互（更新选中的选项） ```javascript ...

隐藏 select 样式 appearance: none;

weixin_30909575的博客

06-03

223

select{ position: absolute; left: 0; top: 0;width: 100%; height: 3em; opacity: 0;text-align:center;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} 转载于:htt...

MyQL数据库管理（基本操作，SQL语言，DDL,DML,DQL,DCL）

qq_48191100的博客

10-12

1292

目录前言一、数据库基本操作命令1.1 MySQL常用管理操作1.2 查看数据库列表信息的命令1.3 查看数据库中的数据表信息命令1.4 显示数据表的结构（字段）命令二、SQL语言2.1 SQL语言概述2.2 DDL语句2.2.1 作用2.2.2 DDL语句创建库、表(create)2.2.3 DDL语句删除库，表（drop）2.2.4 DDL语句更改表结构(alter)2.3 DML语句2.3.1 作用2.3.2 向数据表中插入新的数据记录2.3.3 修改，更新数据表中的数据记录2.3.4 在数据表中删除指

layui隐藏和显示下拉框

bigpaoa的博客

09-29

3612

layui隐藏和显示下拉框首先在jsp中编写下拉框（注意后的id值） <div id="orgList1"> <label class="layui-form-label"><span style="color: red;">*</span>机构代码 </label> <div class="layui-input-inline" lay-filter="orgLists">

select框默认样式去除（隐藏的小图标显示）

zuo_zuo_blog的博客

11-20

6767

CSS代码 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display: none; } .info-select{ width: 12%; margin-left: 64%; border: none; ...

去掉textarea小三角，禁止调整大小