热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

option样式美化css,CSSselect样式优化

下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了。请选择您所在的城市请选择您所在的城市中山市太原市广州市CSS样式

下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了。

请选择您所在的城市

请选择您所在的城市

中山市

太原市

广州市

CSS样式

.sel_wrap{

height:40px;

background:#fff url(img/icons.png) no-repeat right -24px;

color: #a1a1a1;

font-size: 16px;

border:1px solid #E4E4E4;

cursor:pointer;

position:relative;

_filter:alpha(opacity=0);

}

.sel_wrap label{

padding-left:10px;

font-size:16px;

z-index:2;

color: #a1a1a1;

line-height: 40px;

height: 40px;

display: block;

}

.sel_wrap .select{

width:100%;

height:40px;

line-height:40px;

z-index:4;

position:absolute;

top:0;

left:0;

margin:0;

padding:0;

opacity:0;

*margin-top:12px;

filter:alpha(opacity=0);

cursor:pointer;

font-size: 16px;

}

JQuery代码:

$(".sel_wrap").on("change", function() {

var o;

var opt = $(this).find('option');

opt.each(function(i) {

if (opt[i].selected == true) {

o = opt[i].innerHTML;

}

})

$(this).find('label').html(o);

}).trigger('change');

CSS select样式优化 含jquery代码

CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下:

< ...

CSS效果&#xff1a;CSS select样式优化 含jquery代码

CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下:

< ...

css select 样式列表-----另一种样式列表

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

通过css属性hack完成select样式美化&#xff0c;并兼容IE

最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...

精简的网站reset 和 css通用样式库

参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

css初始化样式代码

为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

CSS常用样式及示例

CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

CSS Reset样式重置

为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. &#64;charset "utf-8"; /* ...

随机推荐

使用win10远程控制ubuntu16.04

使用win10远程控制ubuntu16.04,网上很多需要安装xfce桌面的.今天介绍一下,不需要安装其他桌面,使用Ubuntu16.04自带桌面,漂亮美观. Ubuntu16.04端: 1.打开终端 ...

asp.net mvc5 伪静态 WebForm

Mvc4和5通用 1.背景:老项目WebForm开发 需要 融合到新项目Mvc5开发 2.需求:Url地址TruckDetail.aspx?id&#61;455 达到效果 truck/455.html 3.不 ...

微信JSSDK与录音相关的坑

欢迎各位转载, 以让微信团队重视这些恼人的BUG. 请注明出处微信JSSDK与录音相关的坑 by lzl124631x 最近一直在做微信JSSDK与录音相关的功能开发, 遇到了各种奇尺大坑, 时不时冷 ...

Dubbo、Zookeeper、SpringMVC的整合使用

互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使 ...

NOTIC: Invalid argument supplied for foreach()

NOTIC: [2] Invalid argument supplied for foreach() Warning: Invalid argument supplied for foreach() ...

A - Shashlik Cooking CodeForces - 1040B

http://codeforces.com/problemset/problem/1040/B Long story short, shashlik is Miroslav&#39;s favorite fo ...

第一篇&#xff1a;初识ASP.NET控件开发_第一节&#xff1a;控件类及其继承关系

1)System.Web.UI.Control(以下简称Control) Control 类是包括自定义控件.用户控件和页在内的所有 ASP.NET 服务器控件的基类..定义由所有 ASP.NET 服 ...

二、Asp.Net Core WebAPI——OcelotDemo

项目源码OcelotDemo 基础知识在教程或者官网文档查看 Ocelot源码 基于.NET平台的Ocelot网关框架教程汇总 这篇文章不错. 这里我只写我想说的 项目结构 API1和API2是测试的 ...

jQuery knowledge

I have used jquery for many years, but didn&#39;t list the problem I ever meeting, so here is a list of ...




推荐阅读
  • C# 对象转 JSON 字符串的方法与应用
    本文介绍如何在 C# 中使用一般处理程序(ASHX)将对象转换为 JSON 字符串,并通过设置响应类型为 application/json 来确保客户端能够正确解析返回的数据。同时,文章还提供了 HTML 页面中不依赖 jQuery 的 AJAX 方法来接收和处理这些 JSON 数据的具体实现。 ... [详细]
  • 近期,谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击(XSS)的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ... [详细]
  • 深入解析AUTOSAR方法论:汽车电子系统开发的理论基础(第三部分)
    本文详细探讨了AUTOSAR方法论在汽车电子软件系统开发中的应用,涵盖了从系统配置到生成可执行代码的各个关键步骤。通过介绍各阶段的任务和工具支持,帮助读者全面理解AUTOSAR的设计流程。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
  • 在开发项目时,遇到了使用jQuery评论插件时出现的错误问题。本文详细介绍了遇到的错误及其解决方案。 ... [详细]
  • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
  • 本文详细解析了HTML5中nav标签的功能及其在网页设计中的应用,帮助开发者更好地理解和使用这一标签来提升网站的结构化水平。 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • Flutter入门指南:实现自动关闭的对话框与提示
    本文为Flutter系列教程的一部分,专注于讲解如何在Flutter应用中实现自动关闭的对话框和提示。通过具体的代码示例,帮助开发者掌握SnackBar、BottomSheet和Dialog的使用方法。 ... [详细]
  • 解决jQuery Spinner按钮垂直排列问题
    本文探讨了如何通过CSS调整jQuery Spinner组件中的上下按钮,实现它们的垂直堆叠布局。 ... [详细]
author-avatar
珠海南驰焊接检测工程有限公司
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有