`
莫生气
  • 浏览: 862552 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

给select标签应用css

阅读更多

        研究CSS,需要给select标签加样式,网上查了资料。像一般给文本框那样的应用css,在ie下是不管用的 ,必须使用特殊的方式才能成。找个例子自己写了下。出来不,不过有个bug,就是文字不能和下拉列表框在同一行上。不知道怎样才能解决嗯?

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
 .select{
  border:1px #7F9DB9 solid;
  float: left;
  display: inline;
  margin-right:6px;
 }
 .select div{
  border:0px #7F9DB9 solid;
  float: left;
 }
 .select>div{
  width:30px;
  height: 17px;overflow:hidden;
  /*clip:rect(0px 100px,17px,0px);*/
 }
 * html .select div select{
  display:block;
  float: left;
  margin: -2px;
 }
 .select div>select{
  display:block;
  width:104px;
  float:none;
  margin: -2px;
  padding: 0px;
 }

 .select select>option{
 text-indent: 4px;
 }
 
</style>
</head>

<body>
<form name="form1" method="post" action="">

我是中国人
 <div class="select">
  <div>
   <select name="select">
       <option>我是中国人</option>
    <option>我是河南人</option>
    <option>我是安阳人</option>
   </select>
  </div>
 </div>
 <div class="select">
  <div>
   <select name="select">
       <option>我是中国人</option>
    <option>我是河南人</option>
    <option>我是安阳人</option>
   </select>
  </div>
  </div>
 <div class="select">
  <div>
   <select name="select">
       <option>我是中国人</option>
    <option>我是河南人</option>
    <option>我是安阳人</option>
   </select>
  </div>
 </div>
</form>
</body>
</html>



分享到:
评论
2 楼 yangqianyu222 2009-07-23  
la ji
1 楼 zhjb7 2008-03-07  
把div换成span试试

相关推荐

    用javascript来实现select标签的美化的代码

    3. 使用javascript读取select标签中的值,并将其应用到假的select标签上。 4. 当用户点击假的select标签时,浮动出一个包含选项的DIV标签,实现了select标签的美化。 准备工作 为了实现select标签的美化,我们...

    html+css面试题答案.docx

    行内元素包括 a、b、span、img、input、strong、select、label、em、button、textarea 等,块级元素包括 div、ul、li、dl、dt、dd、p、h1-h6、blockquote 等,空元素包括 br、meta、hr、link、input、img 等。...

    为ion-select添加图片

    1.ionic中的ion-select标签添加图片 2.ion-select有四种显示方式,四种添加图片的代码示列 3.通过这个实列,你会在ionic中灵活应用css样式;还会学到javaScript的一些知识(如:获取Dom节点、获取html元素、自定义...

    用javascript实现select的美化的方法

    3. 读取 Select 标签中的值,并将其应用到假的 Select 标签中。 4. 当用户点击假的 Select 标签时,浮动出一个包含选项的 DIV 标签。 准备工作 1. 想好你要把 Select 美化成什么样子,并准备好相应的图片。 2. ...

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

    33前端开发基础视频-div和span标签的应用.avi 34前端开发基础视频-表单标签form-input-select-textarea.avi 35前端开发基础视频-QQ注册案例.avi 36前端开发基础视频-表单分组标签.avi 37前端开发基础视频-表单...

    几乎被设计师遗忘了的标签fieldset legend

    它通常包含 legend 标签、input 标签、textarea 标签、select 标签等。fieldset 标签的语法结构如下: &lt;!-- 表单元素 --&gt; 在上面的代码中,fieldset 标签用于分组表单元素,而legend 标签用于描述该分组的名称...

    knobs:UI旋钮控制器,用于JSCSS实时操作各种参数

    特征: Range输入(车轮支持) 带有很棒的自定义Color输入Checkbox输入select下拉菜单(本机) 全部重置(默认) 重设个人标签-允许对标签后定义的每个旋钮进行分组展开/折叠旋钮组实时,即时或通过“应

    HTML基础学习基础认知,适合小白玩

    select及option标签 button标签 label标签的应用 fieldset及legend标签 表单属性与表单提交 框架集与框架 框架集的嵌套 浮动框架 超链接和表单的目标框架或窗口 使用base标签设定基准目标 css层叠样式表 ...

    vue实现页面内容禁止选中功能,仅输入框和文本域可选

    CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    基于DjangoORM的外键实现增加用户(含select标签) 作业 第20周 课程安排 上课内容回顾 Django一对多的创建 创建一对多表结构 获取单表单数据的三种方式 一对多跨表操作 一对多块表操作的的三种方式 增加一对多...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.18 Ext.form.Label标签字段 4.1.19 Ext.form.FieldSet字段集 4.1.20 Ext.form.FieldContainer容器字段 4.1.21 Ext.form.field.File文件上传字段 4.2 实现表单验证 4.2.1 常见的验证类型 4.2.2 表单验证...

    vue-tagsinput一个简单的标签输入Vue.js 2组件,具有typeahead / autocomplete-Vue.js开发

    Voerro Vue标签输入v2使用Vue.js内置的typeahead输入简单标签2.通过NPM npm i @ voerro ...在页面上包含dist / style.css文件以应用样式。 您可以使用CDN,在JS代码中使用require()或在(S)CSS资产中@include它。 [R

    IBM WebSphere Portal门户开发笔记01

    45、CSS背景图片与内容放大与缩小时相对定位 321 46、JS ATTACHEVENT与ADDEVENTLISTENER区别 321 47、JS WINDOW.EVENT.CANCELBUBBLE 事件冒泡 323 48、JS解决COOKIE跨域访问的问题之方法一 323 49、JS禁止复制网页...

    用户信息注册页面制作.pptx

    Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的前端框架,用于快速搭建响应式的 Web 应用程序。它提供了一套简洁、灵活的布局系统、丰富的 UI 组件和强大的插件系统,可以帮助开发者快速构建 Web 应用程序。 二...

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 form表单之select标签 09 table标签 第38章 01 css的四种引入方式 02 css的四种基本选择器 03 css的组合选择器 04 css的属性选择器 05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本...

    tagify:Van Vanilla JS React Angular Vue中的轻量级,高效的Tag输入组件

    标签输入组件 以简单,可自定义的方式将输入字段...可以应用于输入和textarea元素 支持(文本和标签在一起) 支持模式(如&lt;select&gt; ) 支持白名单/黑名单 支持以下模板:组件包装器,标签项,建议列表和建议项

    Sublime Text3_64.rar

    Sublime Text3 中文个人授权版Sublime Text 3 应用技巧和诀窍 1.选择 以下是一些Sublime Text选择文本的快捷键: Command + D 选中一个单词 Command + L 选中一行 Command + A 全选 Ctrl + Command + M`...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     7.2.2 通过script标签绕过跨站点限制   7.2.3 后退按钮和书签功能   7.2.4 完成请求的赛跑   7.2.5 增加资源占用   7.2.6 问题解决了吗   7.3 实例:Ajax增强的相册   7.4 小结   第8章 ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     7.2.2 通过script标签绕过跨站点限制   7.2.3 后退按钮和书签功能   7.2.4 完成请求的赛跑   7.2.5 增加资源占用   7.2.6 问题解决了吗   7.3 实例:Ajax增强的相册   7.4 小结   第8章 ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     7.2.2 通过script标签绕过跨站点限制   7.2.3 后退按钮和书签功能   7.2.4 完成请求的赛跑   7.2.5 增加资源占用   7.2.6 问题解决了吗   7.3 实例:Ajax增强的相册   7.4 小结   第8章 ...

Global site tag (gtag.js) - Google Analytics