select控件样式(兼容IE6、IE7、Firefox 2.0)

前端表单控件样式定制全攻略 表单控件是Web开发中的基础组件,但浏览器默认样式往往与设计需求不符。通过CSS的appearance属性可以移除原生样式,结合伪元素和定位技术实现自定义复选框、下拉框等复杂控件。现代CSS技术如变量定义和伪类选择器,能够有效解决跨浏览器兼容性问题,同时保持可访问性。在实际工程中,这些技巧能显著提升表单的视觉一致性,特别是在响应式设计和主题化场景下。本文以input、select等常见控件为例,详解如何通过Shadow DOM覆盖和状态管理实现企业级表单样式定制。 阅读详情
<div class="form-file-box">
        <div class="select mr10">
                  <div>
                          <select name="ddlSheng" id="ddlSheng" style="width: 127px; font-family: 微软雅黑;" class="">
<option selected="selected" value="0">---请选择---</option>
<option value="安徽">安徽</option>

</select>
                     </div>
            </div>

 </div>


css样式:

.select * {
  margin: 0;
  padding: 0;
}
.select {
  border:1px solid #c5c5c5;
  border-bottom: 1px solid #d9d9d9;
  float: left;
  height:25px;
  display: inline;
  padding-top:5px;
  /*
  margin-top:0;
  margin-top:1px \9;
  margin-top:1px;
  _margin-top:1px;**/
  background-color:#fff;
  font-family:"微软雅黑","Microsoft YaHei";
  }
.select.focus{
    border:1px solid #fd5e5e !important;
}
.select div {
  float: left;
  *height:19px
}
/* 子选择器,在FF等非IE浏览器中识别 */
.select>div {
  height: 19px;
  overflow:hidden;
  }
/* 通配选择符,只在IE浏览器中识别 */
* html .select div select {
  display:block;
  float: left;
  margin: -2px;
  height:29px;
}
.select div>select {
  display:block;
  float:none;
  margin:-2px;
  padding: 0px;
  height:25px;
}
.select:hover {
  border:1px solid #d1d1d1; /*鼠标移上的效果*/
}
.select select>option {
  text-indent: 2px; /*option在FF等非IE浏览器缩进2px*/
  font-family:"微软雅黑","Microsoft YaHei";
}

完美解决IE6下select控件样式 完美解决各个浏览器下select显示不同样样式,本资源采用主要JQuery类库。全面支持各种web开发语言。其中包含调用案例 立即下载

相关推荐

带搜索功能的select组件,支持IE8以上及其他浏览器

带搜索功能的select组件,支持IE8以上及其他浏览器,输入字符自动匹配

[原创] select控件样式(兼容IE6、IE7、Firefox 2.0)

1<styletype="text/css"> 2<!-- 3.select{}{margin:0;padding:0;border:1pxsolid#cccccc;float:left;display:inline;} 4.selectdiv{}{border:1pxsolid#f9f9f9;float:left...

banjue1105的博客 161

下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)

复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>兼容IE6/IE7/IE8/火狐—下拉菜单select样式设置</title>

IE7下的select框高度设定

一:问题提出 这个是一个广为人知的bug了。 在IE7下面无法设定select的高度: select {height:40px;} 上面的设定能够在chrome跟firefox下面有效,如下图:  在IE7下面的效果就是IE浏览器默认的高度:  应该怎样去思考这个问题?我努力尝试网上各种各样的方法,有javascript模拟的,有css模拟的。

wangxiaohui6687的专栏 3532

BLDC六步换相驱动实战:从霍尔真值表到PWM调速的代码实现

本文详细解析了BLDC六步换相驱动原理,从霍尔真值表解读到PWM调速的代码实现,提供了基于STM32的实战方案。重点介绍了霍尔信号解码、换相状态机设计以及PWM动态调速策略,帮助开发者快速掌握无刷电机驱动技术。

weixin_28273593的博客 210

20240128 C#与SCPI协议实战:轻量级仪器控制库ScpiNet应用指南

本文详细介绍了轻量级C#库ScpiNet在仪器控制中的应用。相较于传统的NI-VISA,ScpiNet无需安装庞大运行时,通过纯C#实现直接与USB或以太网设备通信,支持跨厂商SCPI仪器。文章提供了从快速连接到实战封装、错误处理的完整指南,帮助开发者构建简洁高效的自动化测试系统。

h9j8k7l6m5n的博客 546

关于web前台在测试IE7下遇到的一些问题

一、IE7下select标签 不只是 innerHtml方法,不支持js修改边框颜色

月色无痕的专栏 1034

一文读懂AI大模型时代的RAG技术

RAG(Retrieval-Augmented Generation,检索增强生成) 是一种结合检索技术与生成模型的技术架构,旨在通过动态引入外部知识库增强大语言模型(LLM)的生成能力。其核心思想是通过检索系统从外部数据源(如企业知识库、实时文档等)获取相关信息,并将检索结果作为上下文输入生成模型,以提高生成答案的准确性、时效性和专业性

awei0916的专栏 2117

原生select高度兼容ie7--css样式

对于一个js刚入门的我来说,js模拟写select估计要鼓捣一天也弄不明白。好吧基于同志们都喜欢用原生的select,就各种百度搜索,发现这个还不错,关键是用css覆盖的哈哈,复制过来的时候ie7下还是有些问题,经改后现在已经能正常看了 js,js我何时才能学会! html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

larennani的博客 1443

Linux Wireless之80211(nl80211, cfg80211, mac80211)

Linux Wireless之80211(nl80211, cfg80211, mac80211)前言在Linux无线子系统中,cfg80211、mac80211和nl80211是三个关键的组件,它们共同工作以实现对802.11设备的配置和管理。cfg80211负责内核空间的通用API,mac80211负责具体的MAC层实现,而nl80211则作为用户空间与内核空间之间的桥梁,用于配置管理和通信。Netlink 是一个 Linux 中的 socket 类型,用于在内核与用户空间之间传递事件。

DD'Notes 1479

OpenClaw实战五|企业文档AI助理:对接内部知识库+自动答疑+文档生成,员工自助查资料零等待

企业最大的隐性成本,不是设备、不是房租,而是内部知识的混乱与流失。OpenClaw企业文档AI助理,本质是给企业做了一个7×24小时在线、永不疲倦、精准无误、自动更新的内部知识管家。它不替代HR、行政、IT,而是把他们从无穷无尽的重复问答、机械文档编写里解放出来,去做更有价值的管理、服务、优化工作。对中小企业来说,不用买昂贵的知识库系统、不用招开发、不用做复杂集成,一台私有化服务器,两天就能落地,性价比拉满。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 144

【转】CSS兼容性问题 CSS hack:区分IE6,IE7,IE8,Firefox

总体的来说就是:*_*+识别,IE专用的条件注释,对象的实际宽度不同,消除ul、ol等列表的缩进,透明,圆角,Select控件永远处于最上 层,居中问题text-align、margin: auto,浮动后IE6解释外边距为实际边距的双倍加上display:inline,字体大小,空格大小。 --------------- 1.CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义

活在当下 乐在其中 1621

【机器学习|评价指标8】混淆矩阵(Confusion Matrix)、Cohen‘s Kappa 系数、详解,平均交并比(mIoU)、列联表(Contingency Table)附代码。

【机器学习|评价指标8】混淆矩阵(Confusion Matrix)、Cohen's Kappa 系数、详解,平均交并比(mIoU)、列联表(Contingency Table)附代码。

2401_89898861的博客 1424

IE6、7中SELECT标签高度的兼容性修复

(设置select高度为40px时在各浏览器中显示效果) (设置select高度为40px时在各浏览器中显示效果) 问题描述: ‘众所周知’,在IE6、7中用height来设定SELECT标签高度是徒劳和无效的。但在IE高版本及FF,chrome等浏览器中是“支持"的。 ”支持“为什么要打引号?即使是在支持height的浏览器中,设定后的显示效果竟然也有很大

LzwGlory的专栏 1206

Allegro如何进行四层板板层设计

板层的设计

weixin_42499230的博客 3189

Vision 机器视觉案例 之 零件边缘缺陷检测

缺陷检测工具

机器视觉李小白的博客 1384

javascript 打造城市选择控件,兼容IE6以及以上,谷歌,Firefox

在淘宝旅行上看到的城市选择效果,感觉还不错,就自己的理解重新实现一遍,先看效果,然后再细说实现原理,支持鼠标上下键选择城市,支持直接输入城市名称,拼音首字母,全拼,支持IE6遮盖SELECT,压缩后12K,Demo如下: 修正1:IE9的BUG我查了有点莫名其妙,但是去掉.cityBox这个CSS里面的box-shadow: 2px 2px 3px rgba(0,0,0,0.3);这段CSS,就...

weixin_30387423的博客 694

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

js脚本:ie和firefox的兼容

1、Select列表控件删除列表项。在IE下工作正常的代码:obj.options.remove(i);需要修改为:obj.remove(i); 添加列表项。在IE下工作正常的代码:var oOption = document.createElement(option); oOption.text = text; oOption.value = value; tar

sinton的专栏 1051

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

纯CSS调整select选择框高度,兼容IE/Firefox/Opera/Safair/Chrome

在IE下直接用height、border定义select没有效果,目前大部分情况都是用js进行模拟,其实css也是可以做得到的,原理很简单,隐藏select选择框的原生边框,再用其他元素模拟内边距及边框就OK了。 首先看一下默认的select在各个浏览器的表现情况。 如下图所示:演示demo 从上图中我们可以看各个浏览器对select的渲染不对高度不一致,连长度也不尽相同

锦铱 6339

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

关于javascript在IE和Firefox上的区别

1.本来在IE下面网页多运行正常,可是在firefox下一点击apply控件之后,html前面的很多代码就会别网页无缘无故的吃掉,结果过来一堆代码。后来就是不知道是什么原因,干脆在代码行前面空了N个空行,结果OK啦        2.IE下,一切也运行正常,可发现SELECT控件在firefox下一点作用都起不了,感觉很是纳闷,只有跟踪代码,发现根本都没有下下去,发现在代码的属性里支持的差

twosecond 491

给select控件在指定位置插入option(javascript)

<br />  <br />问题描述<br />      对于select控件 1 2 3,我们可以通过它的options.add(new Option(v,t))的方法动态的插入一个option选项,但是新增的option的位置只能在最后,却不能插入到指定的任意位置。<br />解决方法<br />      既然select的options属性提供的方法无法实现上面的需求,那么只好找办法了。我们知道html控件都有一个insertBefore的方法,用以在指定位置插入子控件,这个方法也许可以使用,不

【设计改变世界】github地址:https://github.com/guochunyang2004 2088

firefox 下的 javascript

为FireFox添加IE的方法和属性  针对Firefox兼容性,要注意的一些问题

zgh2002007的专栏 1105

CSS中各个浏览器兼容的解决办法

1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义!important 可被FireFox和IE7识别* 可被IE6、IE7识别_ 可被IE6识别*+ 可被IE7识别 区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green !important;background...

GBM2014的博客 327

编写Javascript脚本,不要忽视了对Firefox的兼容性

本篇内容,主要是个人根据工作中遇到的情况,做个小结。 1、Select列表控件删除列表项。在IE下工作正常的代码:obj.options.remove(i);需要修改为:obj.remove(i);添加列表项。在IE下工作正常的代码:var oOption = document.createElement(option); oOption

未来之路 1564
上一篇: css解决文字单行两端对齐(兼容ie7)
下一篇: highcharts柱状图的高度跟柱状图上方显示的数字、提示框没关系
github_39051926
博客等级 码龄9年 3粉丝 36原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值