`
jsdit
  • 浏览: 8338 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

select用CSS控制边框及其他属性

阅读更多
    select控件用CSS不太好管!
  在style里写上 width:??px;这个可以实现.
   height:??px; 这个就实现不了. 只能通过调整里面字体的大小来改变高度.
   background可以实现,但用背景图就不行了.
  select的border是默认的蓝色, CSS用border属性是改变不了的. 只有通过伪装的方法才能让边框改变,下面详细介绍一下:
  思路:先建一个带有预想边框的层, 在里面放上select,其中select的尺寸要比div稍微大一点,让超出层的内容隐藏从而遮盖住select自带的边框.
  <div style="border:solid 1px #ffcc00; width:100px; height:20px;overflow:hidden;">
   <select name="select" style="width:105px; height:25px; margin-left:-1px; margin-top:-1px;" name="select" >
   <option value="1">普通会员</option>
   <option value="2">二级分会或地方分会</option>
   <option value="3">协会</option>
   </select>
  </div>
  用这种方法即可以让select没有边框,也可以改变边框. 但这只限于select的list状态. 当显示成multiple状态的时候,在IE里都会有一框深限的痕迹,在FF里没有! 小样儿,真不好控制!
分享到:
评论

相关推荐

    select2.js/select2.css

    select2资源包。里面包含select2相关的js、css,解压后在dist目录下可找到。使用select2需要搭配jquery1.8以上版本。在这资源包的vendor文件夹下有jquery2.1的版本

    纯Css更改Select下拉框样式

    纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框样式,显示框的样式更改,下拉列表的样式更改!纯干货,肯定是你需要的 纯Css更改Select下拉框...

    CSS3鼠标悬停文字边框背景动画特效.zip

    -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; } .btn:before, .btn:after { content: ''; position: absolute; -webkit-transition: inherit;...

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

    怎么自定义select下拉选择框的样式,使用纯CSS实现,把浏览器默认的样式覆盖掉还是有其他的方法,select靠纯CSS是不能解决这个自定义样式问题,下面为大家讲解下CSS实现的思路

    CSS3联系表单 清新外观带美化Select表单

    之前我向大家分享过一款非常绚丽的CSS3发光表单,的确是很酷,大家可以先看看。...表单整体看上去很干净,特别的是,该CSS3联系表单有一个自定义的美化select表单,表单项在被激活的时候边框颜色会改变。

    H5+CSS3.zip

    表单标签:使用创建表单,文本输入框,密码输入框,数字输入框,网址输入框,邮箱输入框,创建文本域,单选框,复选框,使用select、option创建下拉菜单,提交按钮,重置按钮; CSS3部分具体内同包括: css引入方式...

    CSS样式风格定义

    }/* 下拉列表框的CSS定义:对应CSS中的“SELECT”,这里为下拉列表框的风格设置,可定义内容为背景、字体、颜色、边框等 */Select{FONT-SIZE: 9pt;HEIGHT: 20px;}/* 顶部用户登录文字链接的CSS定义 */.top_UserLogin{...

    FIF DW教程四五六章

    4.4 创建CSS样式表文件及基本写法 4.5 层叠样式表的冲突 4.6 CSS的单位 4.7 CSS的属性  4.7.1类型属性  4.7.2背景属性  4.7.3区块属性(上)(下)  4.7.4方框属性  4.7.5边框属性  4.7.6列表属性  4.7.7定位...

    CSS怎么去掉select的下拉箭头样式

    废话不多说了,直接给大家贴css代码了,具体代码如下所示: CSS Code复制内容到剪贴板 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/  border: solid 1px #000; /*很关键:将默认的...

    技术讲座_Div+Css布局

    div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意。  1、表单文本输入的移动选择:  在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入...

    css笔记课程笔记2019,5,22

    ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** &lt;font size="5"&gt;&lt;/font&gt; 2、图像标签 图片的路径"/&gt; ** 通过html访问本地图片,使用绝对路径,目前有问题 3、...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...

    CSS3:CSS3 知识点提炼整理

    CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition & keyframes @media 媒体查询 flex 弹性盒 width: 50}, CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子...

    用CSS对TD中INPUT的宽度设置

    于是考虑用CSS对每个控件设置宽高。但设置成100%后,会将边框遮住,经过调整,将宽度设置成97%后显示正常。 复制代码代码如下: &lt;style type=”text/css”&gt; .borderNone {width:97%; height:100%;border:none;...

    超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程

    01大前端开发和全栈开发的定义... 92前端开发基础视频-CSS边框的妙用案例.avi 93前端开发基础视频-CSS内边距Padding的使用.avi 94前端开发基础视频-CSS内边距补充.avi 95前端开发基础视频-CSS外边距margin的详解.avi

    XML实用大全(web开发必备手册)

    7.5.3 如何使用其他字符集编写XML. 174 7.6 本章小结... 176 第二部分 文档类型定义... 177 第8章 文档类型定义和合法性... 177 8.1 文档类型定义... 177 8.2 文档类型声明... 179 8.3 根据DTD的合法性检验......

    xml实用大全和轻松学习手册和无废话xml

    7.5.3 如何使用其他字符集编写XML 174 7.6 本章小结 176 第二部分 文档类型定义 177 第8章 文档类型定义和合法性 177 8.1 文档类型定义 177 8.2 文档类型声明 179 8.3 根据DTD的合法性检验 182 8.4 列出元素 187 8.5...

    XMl实用大全(资料全易学习)

    7.5.3 如何使用其他字符集编写XML 174 7.6 本章小结 176 第二部分 文档类型定义 177 第8章 文档类型定义和合法性 177 8.1 文档类型定义 177 8.2 文档类型声明 179 8.3 根据DTD的合法性检验 182 8.4 列出元素 187 8.5...

    XML实用大全----xml详细参考书

    7.5.3 如何使用其他字符集编写XML. 174 7.6 本章小结... 176 第二部分 文档类型定义... 177 第8章 文档类型定义和合法性... 177 8.1 文档类型定义... 177 8.2 文档类型声明... 179 8.3 根据DTD的合法性检验......

Global site tag (gtag.js) - Google Analytics