美化select - Tadas - ITeye博客

`

jsntghf

浏览: 2511447 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

jsntghf： peio 写道这个怎么运行？Ruby On Rails的环境搭 ...
多文件上传之uploadify
peio：这个怎么运行？
多文件上传之uploadify
往事如烟1：我的项目是自己init了一个原始的project，之后将ver ...
React Native热部署之CodePush
jsntghf：往事如烟1 写道我按照你的说明进行，发现app退出之后，在进入 ...
React Native热部署之CodePush
往事如烟1：我按照你的说明进行，发现app退出之后，在进入不正确，请问是什 ...
React Native热部署之CodePush

美化select

博客分类：

Web前端

html css select

阅读更多

<!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" lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>美化Select</title>
        <script type="text/javascript" src="select.js"></script>
        <style type="text/css"> 
            select{width:200px;height:20px;}
        </style>
    </head>
    <body>
        <select id="province" name="province">
            <option value="1">江西</option>
            <option value="2">福建</option>
            <option value="3">广东</option>
            <option value="4">浙江</option>
        </select>
        <script type="text/javascript">
            window.onload=function(){
                loadSelect(document.getElementById('province'));
            }
        </script>
    </body>
</html>

JS部分参考附件。

效果图：

demo.rar (2.2 KB)
下载次数: 21

分享到：

滚动字幕效果 | 无图片圆角

2011-09-06 16:50
浏览 1327
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

基于jquery的美化select插件: 基于jQuery的美化select插件就是为了改善这种状况，提供统一、美观的下拉选择框界面，同时保持良好的浏览器兼容性。一、jQuery与jQuery插件 jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、...

js+css美化select，简单易用代码少，可以自己控制样式: 这篇博客"js+css美化select，简单易用代码少"探讨了如何利用这两种技术实现这一目标，而且重点在于代码简洁，易于理解。首先，我们需要理解JavaScript的作用。JavaScript可以用来动态地操作DOM（文档对象模型），...

jquery+css3美化select下拉列表框特效: 在网页设计中，"jquery+css3美化select下拉列表框特效"是一个常见的需求，它旨在提升用户体验，使传统的HTML `<select>` 元素看起来更加现代和吸引人。本项目结合了JavaScript库jQuery和CSS3的新特性，为下拉列表框...

JQ美化select控件: 针对这一问题，开发者们创造了许多jQuery插件来美化SELECT控件，使其在功能和视觉效果上都有所提升。本项目就是其中的一款，名为“JQ美化select控件”，它具备良好的兼容性和多浏览器支持，包括IE6到IE11、Firefox和...

jQuery美化select下拉框: 在美化select下拉框时，jQuery可以提供一套跨浏览器的解决方案，帮助我们创建具有统一外观和交互体验的选择框。要实现jQuery美化select下拉框，通常我们会使用以下步骤： 1. **引入jQuery库**：首先，在HTML文件...

jQuery美化Select下拉框.zip: 《jQuery美化Select下拉框详解》在网页开发中，Select下拉框是常见的表单元素，但在默认状态下，其样式往往显得朴素无华，不符合现代网页设计的审美要求。为了解决这个问题，jQuery提供了一种强大的解决方案——...

美化select控件Jquery chosen: "美化select控件Jquery chosen"正是为了解决这一问题而存在的。Chosen是一个流行的jQuery插件，它提供了美观且易用的多选和单选下拉菜单，极大地提升了用户体验。 Chosen插件的核心特性包括： 1. **美化样式**：...

jQuery自定义美化Select下拉框插件: 之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件，比如...今天我们要给大家介绍另一款基于jQuery的自定义美化Select下拉框插件，它的配置十分简单，引用插件库后用几行jQuery代码初始化即可。

jquery select美化 select插件下拉框美化成类似菜单风格(兼容很好).zip: 本资源"jquery select美化 select插件下拉框美化成类似菜单风格(兼容很好)"正是这样一个解决方案，它将Select转换为类似菜单的风格，且具有良好的浏览器兼容性。 jQuery是一款广泛使用的JavaScript库，它简化了DOM...

jquery 美化select 自定义函数: 这时，我们就需要借助jQuery这样的JavaScript库来对`select`进行美化。本文将详细介绍如何在jQuery基础上美化`select`，并实现自定义函数，同时确保原有的功能如取值、增删改等操作不受影响。首先，我们需要引入...

jQuery美化Select下拉菜单插件.zip: "jQuery美化Select下拉菜单插件"正是这样一个解决方案，它通过jQuery技术和CSS样式，将原本单调的`<select>`元素转化为更加精致、易于使用的下拉菜单。这个插件可能包含了以下关键知识点： 1. **jQuery基础**：...

一款html5表单样式美化select单选框表单提交代码.zip: "一款html5表单样式美化select单选框表单提交代码.zip" 是一个资源包，旨在帮助开发者实现更美观、更具吸引力的HTML5表单设计。这个压缩包包含了一个使用须知的文本文件（使用须知.txt）以及一个可能为CSS或...

图片美化Select下拉框及Input文本框效果.rar: 图片美化Select下拉框及Input文本框效果，select新样式，使用了htc文件，因此在兼容性方面，仅支持IE内核的浏览器，火狐、傲游可能有些问题。本美化效果包括3个表单元素： 1、select下拉按钮的新样式 2、文本框...

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

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

用JavaScript来美化HTML的select标签的下拉列表效果: JavaScript在美化select标签的过程中主要扮演了以下几个角色： 1. 隐藏原始select元素：通过JavaScript，可以将原始的select标签隐藏起来，让其不可见。这是实现自定义下拉列表效果的前提，因为只有隐藏了原生的...

select下拉菜单美化: 本文将深入探讨如何通过CSS和JavaScript技术来重新定义和美化select元素，打破其默认样式带来的限制。一、基本概念 1. Select元素：在HTML中，`<select>`标签用于创建一个下拉列表，用户可以从预定义的选项中进行...

Global site tag (gtag.js) - Google Analytics