select控件用CSS不太好管!
在style里写上 width:??px;这个可以实现.
height:??px; 这个就实现不了. 只能通过调整里面字体的大小来改变高度.
background可以实现,但用背景图就不行了.
select的border是默认的蓝色, CSS用border属性是改变不了的. 只有通过伪装的方法才能让边框改变,下面详细介绍一下:
思路:先建一个带有预想边框的层, 在里面放上select,其中select的尺寸要比div稍微大一点,让超出层的内容隐藏从而遮盖住select自带的边框.
<div style="border:solid 1px #ffcc00; width:100px; height:20px;overflow:hidden;">
<select name="select" style="width:105px; height:25px; margin-left:-1px; margin-top:-1px;" name="select" >
<option value="1">普通会员</option>
<option value="2">二级分会或地方分会</option>
<option value="3">协会</option>
</select>
</div>
用这种方法即可以让select没有边框,也可以改变边框. 但这只限于select的list状态. 当显示成multiple状态的时候,在IE里都会有一框深限的痕迹,在FF里没有! 小样儿,真不好控制!
分享到：
相关推荐
对于 `<select>` 标签的边框颜色，我们可以使用以下 CSS 属性进行调整： ```css select { border-color: #your-color; } ``` 在这里，`#your-color` 是你想要设置的边框颜色，可以是任何有效的 CSS 颜色值，如 `#...
- 为`select`元素添加`z-index`属性，使其在其他元素之上，以增强立体感。 - 创建一个带有3D效果的箭头，可以通过调整伪元素`:before`和`:after`的大小和位置来实现。 在项目中，`index.html`文件应该是主页面，...
通过CSS，我们可以定义字体、颜色、背景、边框等样式属性，使下拉菜单与网站的其他元素保持视觉一致性。还可以利用伪类（如`:hover`, `:active`, `:focus`）来控制用户交互时的样式变化，增加交互反馈。 博客中提到...
select2资源包。里面包含select2相关的js、css，解压后在dist目录下可找到。使用select2需要搭配jquery1.8以上版本。在这资源包的vendor文件夹下有jquery2.1的版本
9. **Option样式**：虽然不能直接修改Option的样式，但我们可以通过JavaScript来动态创建Option元素并设置它们的样式，或者考虑使用其他HTML元素（如`<li>`）配合JavaScript模拟Select的功能。 10. **优化性能**：...
1. **select2.css**：这是Select2的样式表文件，包含了所有必要的CSS样式，用于定义Select2选择框的外观，如边框、背景色、字体样式等。正确引入这个文件是保证Select2正常显示并具有统一设计风格的关键。通常，你...
纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框...
总的来说，"CSS+jQuery简单实现select下拉框"这个项目提供了一种方法，通过结合CSS的样式控制和jQuery的交互处理，创建出既美观又功能丰富的自定义下拉框。这种方法在兼容性方面考虑了IE8+、Chrome和Firefox等主流...
为了突破这些限制，开发者经常使用`div`和`css`来模拟`select`下拉菜单，以实现更丰富的视觉效果和交互体验。这种技术被称为“div+css模拟select”。 一、为什么使用div+css模拟select？ 1. **样式可控**：使用...
接下来，我们需要用CSS来定制`select`的外观。由于`select`元素在不同浏览器中的样式难以统一，我们将主要依赖于`::before`和`::after`伪元素来模拟`select`的箭头图标和其他视觉元素。例如，我们可以创建一个`::...
例如，IE9及以下版本对许多CSS3属性支持有限。因此，在实际项目中，可能需要借助于如Autoprefixer这样的工具来自动添加浏览器前缀，或者使用JavaScript库如Select2、Chosen等来实现更高级的定制和兼容性处理。 在...
1. **替换HTML结构**：通常，我们会用一个div或其他HTML元素来模拟Select，这样可以更自由地应用CSS样式。例如，可以创建一个包含多个li元素的ul，每个li对应一个选项。JS则负责监听用户交互，如点击事件，来更新...
5. `images`目录：尽管插件没有使用图片，但这个目录可能用于存储其他非CSS3实现的图形资源。 6. `js`目录：存放JavaScript文件，包括jQuery库和插件的脚本。 综上所述，这款jQuery和CSS3的Select下拉列表框美化...
1. **隐藏原生** `<select>` **元素**：使用CSS的`display:none`属性隐藏原始的`<select>`元素，但保持其仍然可以接收和响应JavaScript事件。 ```css .select-hidden { display: none; } ``` 2. **创建自定义容器...
我们可以设置`select`元素的宽度、高度、边框、背景色等属性，以及`option`元素的字体、颜色等，实现视觉效果的提升。例如： ```css select { width: 200px; height: 35px; border: 1px solid #ccc; border-...
要改变`<select>`的宽度、高度、颜色等基本属性，可以使用常规的CSS选择器： ```css select { width: 200px; /* 宽度 */ height: 35px; /* 高度 */ font-size: 16px; /* 字体大小 */ color: #333; /* 文字颜色 ...
CSS还负责控制元素的定位和浮动，使得下拉框能正确地与其它元素对齐并响应用户的操作。 4. **下拉列表框的交互设计** 这个模仿的下拉框控件不仅具备基本的选择功能，可能还包括搜索过滤、多选、分组等高级特性。...
- `position`属性：使用`relative`或`absolute`定位元素，以便将下拉菜单与模拟的Select按钮对齐。 - `background-image`和`background-position`：通过设置背景图片（如231733465.gif、mac-select.gif等）来实现...
CSS3是CSS（层叠样式表）的最新版本，引入了许多新的选择器、属性和动画功能。在这个美化过程中，CSS3被用来设计下拉列表框的外观，包括边框、背景、阴影、过渡效果等，同时还可以实现自定义字体、颜色和布局。例如...
这种方法更复杂一些，除了使用`margin`属性外，还需要利用`clip`属性来控制`<select>`元素的可视区域。代码示例如下： ```html ;border:1px solid #333333; width:80;height:20"> <select style="position:...