清除浏览器默认表单边框/背景特效和下拉菜单背景
大家应该都留意到类似谷歌和火狐浏览器中都会有自己默认的样式设置,比如谷歌浏览器所有的表单都会添加黄色边框特效。当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得多余了!这里我们介绍下如何去掉Chrome谷歌浏览器默认的input、textarea的边框(border)和背景(background) 及Chrome下不可更改textarea大小。
可以用下面的代码去掉所有元素的边框轮廓,
01
|
*:focus { outline : none ;}
|
用下面的代码去掉你要去掉的元素的边框轮廓,
01
|
.nohighlight:focus { outline : none ; }
|
你也可以给元素增加你希望的边框,
01
|
.changeborder:focus { outline :blue solid 4px ; }
|
Chrome允许用户控制textarea表单域的大小,在CSS中加入下面一句就可以了,
01
|
. textarea {resize: none ;}
|
谷歌会自动加背景的问题:
谷歌浏览器内核特有。用:-webkit-appearance:none 解决。
select下拉菜单CSS美化:
当我需要用下拉列表拼凑自定义表单时,我常常不得不使用下拉框(select),由于某些部分是浏览器特定的,如下拉箭头,我花了一段时间去搞清楚如何只使用css轻松地美化下拉框。
下面是一个默认样式的下拉框的长相:
- Here is the first option
- Here is the first option
code:
<select><option>Here is the first option</option><option>The second option</option> </select>
一个选择框的某些部分我们是可以美化的,比如字体、边框、颜色、内边距和背景颜色:
但是烦人的下拉箭头还是保持不变。没有直接美化它的方式,但解决方案还是非常简单的,首先我们需要用一个div容器包裹在select元素外围:
1 <div class="styled-select"> 2 <select> 3 <option>Here is the first option</option> 4 <option>The second option</option> 5 </select> 6 </div>
下一步我们需要加入一些css,以确保选择框元素被以某种方式美化:
.styled-select select {background: transparent;width: 268px;padding: 5px;font-size: 16px;border: 1px solid #ccc;height: 34px;-webkit-appearance: none; /*for chrome*/ }
我们需要确保选择框的跨度比外围的div容器更宽,这样默认的下拉箭头就会消失(译者注:选择框比外面的div宽大,默认的下拉箭头就会被隐藏)
下面是我们要用的新下拉箭头:
我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置:
.styled-select {width: 240px;height: 34px;overflow: hidden;background: url(new_arrow.png) no-repeat right #ddd; }
解决办法非常容易,不用别的只使用css就能美化您的选择框。
清除浏览器默认表单边框/背景特效和下拉菜单背景相关推荐
- [css] css怎么更改表单的单选框或下拉框的默认样式?
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
- 谷歌浏览器无法选select_去除谷歌浏览器表单边框特效和select下拉菜单背景
01 02 textarea {resize:none;} 然后就是这个谷歌会自动加背景的问题: 这是谷歌浏览器内核特有.用:-webkit-appearance:none 解决. 附:sele ...
- Qt QComboBox下拉菜单背景透明
下拉菜单四个角是圆角,但是背景不透明,给QComboBox包括他的QAbstractItemView设置了qss,不起作用,如下图所示. 而且这个QAbstractItemView的背景颜色是和上面的 ...
- 更改tkinter的OptionMenu背景颜色和下拉菜单宽度
w = OptionMenu(master, variable, "one", "two", "three") w.config(bg = ...
- 【QT】ComboBox下拉菜单背景透明设置
把combobox放在widget,把widget的背景色设置成透明(rgba(0,0,0,0))
- php 下拉菜单 不提交 选中的值,在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值...
这次给大家带来在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值,在html中做到下拉菜单提交后保留选中值不返回默认值的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下: // 获 ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
- 本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
最新文章
- C# 设计时动态改变实体在PropertyGrid中显示出来的属性
- 数据库设计中的14个关键技巧收藏[转]
- JAVA的String的实现
- 记录一个自动创建分区的脚本
- 玩转oracle 11g(35):rman备份-参数文件spfile损坏恢复
- 解决: 网站访问报错 AccessDenied (阿里云 OSS + CDN )
- 每个计算机系的学生都学离散数学,离散数学一阶逻辑精要.ppt
- ECCV18 Oral | CornerNet目标检测开启预测“边界框”到预测“点对”的新思路
- tum数据集_数值预报尚能战否?来自数据驱动的挑战
- Jquery的jqzoom插件的使用(图片放大镜)
- Windows核心编程——内存映射
- sql重复数据只保留一条_一条SQL完成跨数据库实例Join查询
- iOS工作中的经验总结—马甲包审核以及常见审核问题!!!(干货)
- android手机 无线充电,无线充电手机有哪些?支持无线充电的手机推荐
- Java 度分秒转经纬度,经纬度转度分秒,度分转经纬度,经纬度转度分
- Android adb shell刷机命令实战
- 如何解决Adobe Flash Player已被屏蔽
- 【Tom原创】我是这样手写Spring的,麻雀虽小五脏俱全
- Unity学习-Prinmatives原形
- 汽车研发的五大阶段及制造的四大工艺