`
huibin
  • 浏览: 756797 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

select用CSS控制边框及其他属性

    博客分类:
  • CSS
 
阅读更多

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标签边框的颜色

    对于 `&lt;select&gt;` 标签的边框颜色,我们可以使用以下 CSS 属性进行调整: ```css select { border-color: #your-color; } ``` 在这里,`#your-color` 是你想要设置的边框颜色,可以是任何有效的 CSS 颜色值,如 `#...

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

    - 为`select`元素添加`z-index`属性,使其在其他元素之上,以增强立体感。 - 创建一个带有3D效果的箭头,可以通过调整伪元素`:before`和`:after`的大小和位置来实现。 在项目中,`index.html`文件应该是主页面,...

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

    通过CSS,我们可以定义字体、颜色、背景、边框等样式属性,使下拉菜单与网站的其他元素保持视觉一致性。还可以利用伪类(如`:hover`, `:active`, `:focus`)来控制用户交互时的样式变化,增加交互反馈。 博客中提到...

    select2.js/select2.css

    select2资源包。里面包含select2相关的js、css,解压后在dist目录下可找到。使用select2需要搭配jquery1.8以上版本。在这资源包的vendor文件夹下有jquery2.1的版本

    css实现表单Select样式美化

    9. **Option样式**:虽然不能直接修改Option的样式,但我们可以通过JavaScript来动态创建Option元素并设置它们的样式,或者考虑使用其他HTML元素(如`&lt;li&gt;`)配合JavaScript模拟Select的功能。 10. **优化性能**:...

    select2插件联动查询用到的css和js文件

    1. **select2.css**:这是Select2的样式表文件,包含了所有必要的CSS样式,用于定义Select2选择框的外观,如边框、背景色、字体样式等。正确引入这个文件是保证Select2正常显示并具有统一设计风格的关键。通常,你...

    纯Css更改Select下拉框样式

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

    CSS+jQuery简单实现select下拉框.zip

    总的来说,"CSS+jQuery简单实现select下拉框"这个项目提供了一种方法,通过结合CSS的样式控制和jQuery的交互处理,创建出既美观又功能丰富的自定义下拉框。这种方法在兼容性方面考虑了IE8+、Chrome和Firefox等主流...

    div+css模拟select

    为了突破这些限制,开发者经常使用`div`和`css`来模拟`select`下拉菜单,以实现更丰富的视觉效果和交互体验。这种技术被称为“div+css模拟select”。 一、为什么使用div+css模拟select? 1. **样式可控**:使用...

    div+css select效果

    接下来,我们需要用CSS来定制`select`的外观。由于`select`元素在不同浏览器中的样式难以统一,我们将主要依赖于`::before`和`::after`伪元素来模拟`select`的箭头图标和其他视觉元素。例如,我们可以创建一个`::...

    html5+css3 select

    例如,IE9及以下版本对许多CSS3属性支持有限。因此,在实际项目中,可能需要借助于如Autoprefixer这样的工具来自动添加浏览器前缀,或者使用JavaScript库如Select2、Chosen等来实现更高级的定制和兼容性处理。 在...

    select2js,css和中文包

    4. **自定义样式**:通过CSS,我们可以调整Select2的外观以符合项目的设计需求,包括颜色、字体大小、边框样式等。 5. **数据源**:Select2不仅能够从传统的HTML`&lt;option&gt;`元素中获取数据,还可以从远程API或者...

    JS+CSS美化经典Select选项框插件

    1. **替换HTML结构**:通常,我们会用一个div或其他HTML元素来模拟Select,这样可以更自由地应用CSS样式。例如,可以创建一个包含多个li元素的ul,每个li对应一个选项。JS则负责监听用户交互,如点击事件,来更新...

    jQuery和css3超赞select下拉列表框美化插件

    5. `images`目录:尽管插件没有使用图片,但这个目录可能用于存储其他非CSS3实现的图形资源。 6. `js`目录:存放JavaScript文件,包括jQuery库和插件的脚本。 综上所述,这款jQuery和CSS3的Select下拉列表框美化...

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

    1. **隐藏原生** `&lt;select&gt;` **元素**:使用CSS的`display:none`属性隐藏原始的`&lt;select&gt;`元素,但保持其仍然可以接收和响应JavaScript事件。 ```css .select-hidden { display: none; } ``` 2. **创建自定义容器...

    JS+CSS和图片美化select下拉列表选择框

    我们可以设置`select`元素的宽度、高度、边框、背景色等属性,以及`option`元素的字体、颜色等,实现视觉效果的提升。例如: ```css select { width: 200px; height: 35px; border: 1px solid #ccc; border-...

    css 设置下拉列表 select 样式

    要改变`&lt;select&gt;`的宽度、高度、颜色等基本属性,可以使用常规的CSS选择器: ```css select { width: 200px; /* 宽度 */ height: 35px; /* 高度 */ font-size: 16px; /* 字体大小 */ color: #333; /* 文字颜色 ...

    精美漂亮的实用div+css模仿select下拉框控件

    CSS还负责控制元素的定位和浮动,使得下拉框能正确地与其它元素对齐并响应用户的操作。 4. **下拉列表框的交互设计** 这个模仿的下拉框控件不仅具备基本的选择功能,可能还包括搜索过滤、多选、分组等高级特性。...

    div css模拟美化的Select样式

    - `position`属性:使用`relative`或`absolute`定位元素,以便将下拉菜单与模拟的Select按钮对齐。 - `background-image`和`background-position`:通过设置背景图片(如231733465.gif、mac-select.gif等)来实现...

    jquery+css3美化select下拉列表框特效

    CSS3是CSS(层叠样式表)的最新版本,引入了许多新的选择器、属性和动画功能。在这个美化过程中,CSS3被用来设计下拉列表框的外观,包括边框、背景、阴影、过渡效果等,同时还可以实现自定义字体、颜色和布局。例如...

Global site tag (gtag.js) - Google Analytics