`
莫生气
  • 浏览: 866229 次
  • 性别: 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试试

相关推荐

    select标签边框的颜色select标签边框的颜色

    以上就是关于“select标签边框的颜色”这一主题的主要知识点。理解并熟练运用这些技巧,可以使你的网页设计更加个性化和专业。在实践中,记得不断测试和调试,以确保在各种环境下的表现都符合预期。

    select2的css和js,gosn.jar

    标签"select2.js"、"gosn"、"select2.css"和"select2"分别对应了Select2库的JavaScript文件、Java对象转JSON的工具以及相关的CSS样式文件,它们共同构成了本资源的主要内容。 **文件列表:** 虽然未提供具体的文件...

    select美化HTML的select标签的原始样式,并且不影响原始select的事件方法调用

    在美化`&lt;select&gt;`的过程中,一种常见的方法是使用CSS来覆盖默认样式。然而,直接修改`&lt;select&gt;`的样式可能会导致一些问题,比如失去原生的交互效果,如滚动和键盘导航。为了解决这个问题,我们可以创建一个自定义的...

    HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码

    在这个“HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码”中,我们将深入探讨如何利用这些技术实现一个创新的下拉菜单。 首先,HTML5中的`&lt;select&gt;`元素通常用于创建选择列表,但其样式控制有限。为了打破这个...

    这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果

    通过CSS3,我们可以对`&lt;select&gt;`元素进行自定义,改变它的外观和交互方式。CSS3提供了许多新特性,如伪类、过渡(transitions)、动画(animations)以及更强大的选择器,使得这样的美化成为可能。 在描述中提到的8...

    定制html的select标签样式

    综上所述,自定义HTML的`&lt;select&gt;`标签样式涉及了HTML基础,CSS样式设计,以及JavaScript和jQuery插件的应用。通过这样的方法,我们可以创建出符合设计需求,同时保持良好交互性的自定义下拉选择框。在实际开发中,...

    JS select标签复选

    在网页开发中,`&lt;select&gt;` 标签用于创建下拉菜单,通常用于提供用户一个选项列表进行选择。然而,标准的 `&lt;select&gt;` 标签默认只支持单选,但通过 JavaScript(JS) 和 jQuery(JQ) 的帮助,我们可以实现多选功能,...

    JS+CSS和图片美化select下拉列表选择框

    本文将深入探讨如何使用JavaScript (JS) 和 CSS 结合图片资源来美化`select`元素。 首先,我们要了解`select`元素的基本结构。在HTML中,`&lt;select&gt;`标签用于创建一个下拉列表,用户可以通过点击展开选项进行选择。...

    select标签multiple属性的使用方法.zip

    在HTML中,`&lt;select&gt;`标签用于创建下拉列表,而`multiple`属性是一个非常实用的特性,它允许用户在下拉列表中选择多个选项,而不是...在实际应用中,结合CSS样式和JavaScript交互,可以打造出功能丰富的多选下拉列表。

    分享带查询的select标签

    【标题】"分享带查询的select标签"涉及的是在网页开发中如何实现一个具有搜索功能的下拉选择框。在传统的HTML中,`&lt;select&gt;`标签用于创建一个下拉列表,但其默认功能并不支持用户输入关键词进行筛选。这篇博客(博文...

    css 设置下拉列表 select 样式

    一个下拉列表通常由`&lt;select&gt;`标签包裹一系列的`&lt;option&gt;`标签组成,例如: ```html &lt;select id="mySelect"&gt; &lt;option value="value1"&gt;Option 1 &lt;option value="value2"&gt;Option 2 &lt;option value="value3"&gt;Option ...

    自定义的select标签

    这个“自定义的select标签”描述的正是这种技术的应用,用于构建一个定制化的下拉选择组件。在实际项目中,可能由于设计风格、交互需求或者功能增强的需求,开发者会选择自定义select标签,以提供更灵活的解决方案。...

    bootstrap select 标签

    在实际应用中,你可以根据项目需求结合这些知识点来灵活配置和使用 Bootstrap Select。如果你正在使用的版本是 `bootstrap-select-1.11.2`,请注意检查文档以获取该版本的具体用法和可能存在的限制,因为随着时间...

    struts2实现页面select标签默认选中

    在Struts2框架中,实现页面`&lt;select&gt;`标签默认选中的功能是非常实用且常见的需求。这不仅可以提高用户体验,还能让界面看起来更加专业。本文将详细介绍如何通过Struts2的相关标签来实现这一功能。 ### Struts2框架...

    jquery select2组件

    &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /&gt; &lt;script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"&gt;&lt;/script&gt; ...

    自己开发的一个生成多级select的自定义标签

    3. **CSS样式**:为了美观和交互性,可能会有CSS文件来控制多级SELECT的显示样式。 4. **示例或测试文件**:展示如何使用自定义标签的HTML、JavaScript文件,可能包含单元测试或集成测试,确保标签功能正常。 5. **...

    cssselect:PythonCSS选择器

    **cssselect:Python中的CSS选择器** 在Python编程中,`cssselect`是一个非常有用的库,它实现了W3C CSS2.1和部分CSS3的选择器语法,使得开发者能够使用类似CSS的方式来选取XML或HTML文档中的元素。这个库是基于`...

    SELECT下拉菜单美化

    但是,原生`SELECT`控件在不同浏览器上的表现可能不一致,且无法直接应用复杂的CSS样式,如伪类、过渡效果等。因此,通常会采用模拟`SELECT`的方法,即用其他HTML元素(如`&lt;div&gt;`、`&lt;ul&gt;`)配合JavaScript来构建一个...

    bootstrap-selectv1.12.4.zip

    1. `bootstrap-select.css`: 主要的 CSS 样式文件,定义了 Bootstrap Select 的视觉样式。 2. `bootstrap-select.min.css`: 压缩版的 CSS 文件,用于生产环境,减少页面加载时间。 3. `bootstrap-select.js`: 主要的...

    select 增加搜索框

    2. **应用Chosen到select元素**:接着,你可以通过jQuery或其他JavaScript库选择`select`元素,并调用`chosen()`方法来激活`Chosen`的功能。确保在DOM加载完成后执行此操作,通常在`$(document).ready()`函数内: `...

Global site tag (gtag.js) - Google Analytics