(转)让select也炫起来

大家都见过用CSS定义的各色的input按钮，但对于select却无法用定义input的简单方式来实现。下面提供另外一种css定义的方式来让你的select炫起来。

CSS部分：

 

.select * {
  margin: 0;
  padding: 0;
}

.select {
  border:1px solid #cccccc;
  float: left;
  display: inline;
  }

.select div {
  border:1px solid #f9f9f9;
  float: left;
}

/* 子选择器，在FF等非IE浏览器中识别 */
.select>div {
  width:120px;
  height: 17px;
  overflow:hidden;
  }

/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
  display:block;
  float: left;
  margin: -2px;
}

.select div>select {
  display:block;
  width:124px;
  float:none;
  margin: -2px;
  padding: 0px;
}

.select:hover {
  border:1px solid #666666; //鼠标移上的效果
}

.select select>option {
  text-indent: 2px; //option在FF等非IE浏览器缩进2px
}

XHTML部分:

<div class="select">
 <div>
 <select>
  <option>飞飞爱赜赜option>
  <option>飞飞爱赜赜option>
  <option>飞飞爱赜赜option>
 select>
 div>
div>

 转自  http://www.csser.com/html/csser/webstandards/200703/09/1126.html

分享到：

(转)label标签的使用 | (转)与您共享 20个优秀的CSS构架网站

• 2007-04-06 14:13
• 浏览 3895
• 评论(0)
• 查看更多

相关推荐

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

除此之外，CSS3的阴影效果（`box-shadow`）被用来增强菜单的立体感，使其看起来更加真实和吸引人。这种阴影不仅可以在菜单元素周围添加，还可以在下拉菜单展开时动态改变，增加视觉冲击力。 JavaScript在这其中的...

根据update语句自动生成select语句

首先，让我们了解UPDATE语句的基本结构。一个典型的UPDATE语句包括表名、要更新的列名、新值以及可选的WHERE子句来指定更新条件： ```sql UPDATE 表名 SET 列名 = 新值 WHERE 条件; ``` 转换为SELECT语句，我们...

HTML5/CSS3自定义浮动Select 超炫下拉菜单动画

在CSS3菜单栏目中，我们分享了很多漂亮的菜单特效，相信很多CSS3菜单也都非常实用。今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单，这个CSS3菜单利用CSS3特性可以浮动在网页上，并带有阴影效果，同时，...

使select可以输入

自制的jquery插件，只需要一行代码，即可将select控件变成一个即可以输入也可以选择的元素，输入时也会有智能提示。对原来的select的操作完全没有改变，取值依然是取select的值，设置选中，添加项删除项等等都没有...

[转]Jquery操作select 收藏

在网页设计中，select元素常用于创建下拉菜单，让用户从预设的选项中选择一个或多个值。 首先，我们来了解jQuery选择器。jQuery的选择器基于CSS，允许开发者以简洁的方式选取DOM元素。例如，`$('select')` 将选取...

实现可编辑的select

在网页开发中，选择框（`<select>`）通常用于让用户在预设的选项中进行选择。然而，标准的HTML `select` 元素并不支持直接编辑，即用户无法自由输入新的选项。为了提供这种功能，开发者通常会利用JavaScript库来实现...

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

在网页设计中，`<select>` 标签用于创建下拉列表，但其默认样式往往不符合现代网页的美观要求。...记住，尽管自定义组件提供了更大的设计自由度，但在实际应用中，也要注意性能和代码维护性，避免过度复杂化。

Select2的插件下载.zip

同时，它还支持模糊搜索，即使用户输入的部分关键词也能匹配到相应的选项。 **二、高级特性** 5. **远程数据加载**：Select2支持从服务器端动态加载数据，用户可以实时搜索并展示远程数据源中的结果。这种特性使得...

select2.mim.js and select2.min.css.zip

本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`，以及它们如何在项目中发挥重要作用。 Select2是一款强大的JavaScript库，它能够将普通的HTML `<select>`元素转变为功能丰富的选择器。通过...

select下拉框添加搜索功能

为了提高用户的操作效率，我们常常需要在`select`下拉框中集成搜索功能，让用户能够通过输入关键字快速找到所需选项。这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能，...

下拉多选插件ySelect.js.rar

下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选...

asp源码-Excel二维表数据转SELECT CASE 工具 v2.0.zip

asp源码—Excel二维表数据转SELECT CASE 工具 v2.0.zip asp源码—Excel二维表数据转SELECT CASE 工具 v2.0.zip asp源码—Excel二维表数据转SELECT CASE 工具 v2.0.zip asp源码—Excel二维表数据转SELECT CASE 工具 v...

select 带搜索功能

1. Select2：Select2 是一个流行的jQuery插件，它不仅提供了搜索功能，还有分页、多选、远程数据加载等功能。示例代码如下： ```html <select class="select2" style="width: 100%;"> <option value="option1">...

jquery select2组件

**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...

jQuery转换选择框为按钮的插件Select2Buttons.zip

Select2Buttons是一个能将网页中的select选择框转换成一组按钮的插件。 主要功能特点： 转换select选择框为标签式按钮 支持js回发调用 支持disabled选项 支持将多个select设置为一组 支持取消默认...

定制html的select标签样式

本文将详细介绍如何通过自定义CSS和JavaScript来改变`<select>`标签的样式，打造更加个性化的下拉选择框。 首先，我们需要了解`<select>`的基本结构和其选项`<option>`。`<select>`标签内包含一系列`<option>`标签...

select2(jquery)插件下载

**jQuery Select2插件详解** Select2是一款基于jQuery...通过以上介绍，我们可以看到jQuery Select2插件的强大之处，它不仅提升了用户体验，也为开发者提供了丰富的定制选项，是构建现代Web应用时不可或缺的一个工具。

jquery.selectbox.js select下拉菜单美化代码

jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码

select2支持拼音检索

这通常涉及到自定义搜索函数，让 Select2 在处理用户输入时不仅匹配汉字，还要匹配拼音。 ```javascript $("#select-element").select2({ // 其他配置项... minimumInputLength: 1, matcher: function (params, ...