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

用css控制select样式

CSSHTML 
阅读更多

http://www.corange.cn/archives/2008/10/1950.html

  1. <html>
  2. <head>
  3. <style>
  4. .box
  5. {
  6. border:1pxsolid#C0C0C0;
  7. width:182px;
  8. height:20px;
  9. clip:rect(0px,181px,20px,0px);
  10. overflow:hidden;
  11. }
  12. .box2
  13. {
  14. border:1pxsolid#F4F4F4;
  15. width:180px;
  16. height:18px;
  17. clip:rect(0px,179px,18px,0px);
  18. overflow:hidden;
  19. }
  20. select
  21. {
  22. position:relative;
  23. left:-2px;
  24. top:-2px;
  25. width:183px;
  26. line-height:14px;color:#909993;
  27. border-style:none;
  28. border-width:0px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <divclass=box><divclass=box2>
  34. <selectsize="1"name="D1">
  35. <option>内容一</option>
  36. <option>内容二</option>
  37. </select>
  38. </div></div>
  39. </body>
  40. </html>
分享到：
| CSS+JS控制Li背景颜色交替
评论
发表评论

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

相关推荐

    纯Css更改Select下拉框样式

    纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框...

    css做select样式

    css做select样式

    css实现表单Select样式美化

    通过以上步骤，我们可以实现一个美观且具有交互反馈的自定义Select样式。然而，值得注意的是，由于浏览器对Select的渲染方式限制，某些高级的定制可能需要借助JavaScript库来实现。在实际项目中，根据需求和目标用户...

    js+css美化select，简单易用代码少，可以自己控制样式

    为了提供更美观、一致的用户体验，开发者经常使用JavaScript和CSS来增强`&lt;select&gt;`元素的外观和功能。这篇博客"js+css美化select，简单易用代码少"探讨了如何利用这两种技术实现这一目标，而且重点在于代码简洁，...

    表单Select样式美化经典案例52CSS

    本主题"表单Select样式美化经典案例52CSS"聚焦于如何通过CSS技术对`Select`元素进行视觉上的优化，提升用户体验。 在传统的HTML`Select`元素中，样式控制能力非常有限，通常只能改变字体、颜色等基本属性。然而，...

    css 设置下拉列表 select 样式

    本文将详细探讨如何使用CSS设置下拉列表`&lt;select&gt;`及其选项`&lt;option&gt;`的样式。 首先，我们需要了解`&lt;select&gt;`的基本结构。一个下拉列表通常由`&lt;select&gt;`标签包裹一系列的`&lt;option&gt;`标签组成，例如： ```html ...

    select2 -- css样式

    select2 css样式，其中确实select2.png 图片，记得修改

    divcss模拟select

    divcss模拟select 下拉框 select 改变样式

    CSS自定义select下拉选择框的样式(不用其他标签模拟)

    首先，我们要明确一点：由于浏览器的安全策略和渲染机制，纯CSS无法直接改变`&lt;select&gt;`、`&lt;option&gt;`等原生表单元素的大部分外观，特别是其下拉箭头和选项高亮样式。但这并不意味着我们无法实现自定义效果。我们可以...

    select 漂亮样式

    select的漂亮样式，完全div+css+js实现，更易懂，更清晰

    定制html的select标签样式

    为了实现自定义样式，我们可以使用JavaScript库，如jQuery，结合CSS来创建一个模拟的下拉选择框。在这个例子中，我们用到了`jquery-1.8.2.min.js`和`jquery.select.widget-1.0.js`两个jQuery插件。 `jquery.select....

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

    在这个项目中，开发者可能使用了`&lt;div&gt;`或者其他HTML元素来模拟`&lt;select&gt;`的行为，同时保持对样式的完全控制。 CSS3的新特性如伪类（`:hover`, `:active`, `:focus`）和转换（`transform`）使得创建动态效果变得...

    div css模拟美化的Select样式

    "div css模拟美化的Select样式"这个主题就是关于如何使用CSS和HTML来创建一个自定义的、视觉上更吸引人的下拉选择框。下面将详细介绍这个过程及其相关知识点。 首先，我们需要理解HTML的`&lt;select&gt;`元素是原生的下拉...

    checkbox-radio-select样式自定义

    文件列表中的"checkbox-radio-select样式自定义"很可能包含了CSS样式文件、HTML模板以及可能的JavaScript脚本来实现这一功能。 总结来说，自定义`checkbox`、`radio`和`select`的样式是前端开发中常见且重要的任务...

    div+css模拟select

    2. **应用CSS样式**：为`div`和`ul`设置适当的宽高、边距、背景色等，用`:hover`、`:focus`伪类实现鼠标悬停和获取焦点时的样式变化。 3. **模拟下拉效果**：通过JavaScript或jQuery监听用户事件，例如点击主`div`时...

    css实现个性化select 下拉选择框(3种风格)

    在本主题中，我们将探讨如何使用CSS实现三种不同的下拉选择框（select）风格：苹果风格、描边风格和凹凸风格。 1. 苹果风格的下拉选择框： 苹果风格的下拉选择框通常以其简洁、优雅的设计而著称。要实现这一风格，...

    CSS3默认样式

    ### CSS3默认样式的解析与应用 #### 一、引言 在网页设计与开发过程中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能够帮助开发者美化页面布局，还能实现各种复杂的视觉效果。CSS3作为CSS的最新版本之一，引入...

    下拉框、下拉控件之Select2内含css和js

    此时，可以通过调整 `select2.css` 中的样式或者使用自定义CSS覆盖默认样式，确保与你的设计风格一致。 ### 注意事项 1. 为了避免冲突，确保正确引入并加载 `jQuery`，因为 `Select2` 基于 `jQuery` 构建。 2. 在...

    常用控件CSS样式

    表单控件如输入框(input)、选择框(select)、复选框(checkbox)、单选按钮(radio)等，它们的默认样式在不同的浏览器中可能会有所差异，因此，使用自定义CSS可以确保跨浏览器的一致性。例如，你可以使用以下代码来改变...

Magicbox
Global site tag (gtag.js) - Google Analytics