`
wwwyousha
  • 浏览: 1374 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

控制下拉列表框过长样式

 
阅读更多



<style>
.sel_in{
border:1px solid #ccc;
width:100px;
height:17px;
background:#f4f4f4;
clip:rect(0px,179px,16px,0px);
overflow:hidden;
}
.sel_in_bt{
border:1px solid #FDEFC6;
width:100px;
height:17px;
clip:rect(0px,179px,16px,0px);
overflow:hidden;
}
.sel{
position:relative;
left:-2px;
top:-2px;
color:#000;
font-size:12px;
background:#f4f4f4;/*控制select的背景颜色*/
width:300;/*控制option的显示长度*/
line-height:14px;
}
.sel_bt{
position:relative;
left:-2px;
top:-2px;
color:#0000FF;
font-size:12px;
background:#FFFFEE;/*控制select的背景颜色*/
width:300;/*控制option的显示长度*/
line-height:16px;
}
</style>
例子一:
<div class="sel_in"><select class="sel">
<option>请选择税务机关</option>
<option>1111111111333333333333333333333333333333333</option>  
<option>22222222222233333333333333333333</option>    
</select></div>

例子二:
<div class="sel_in_bt" style="width:200px">
<select class="sel_bt" style="width:400px;">
<option>请选择税务机关</option>
<option>1111111111333333333333333333333333333333333</option>  
<option>22222222222233333333333333333333</option>
<option>22222222222233333333333333333333</option>

<option>22222222222233333333333333333333</option>
<option>3333333333333232323333333333333333333333333333333333333333</option>  
</select></div>
分享到:
评论

相关推荐

    下拉列表框美化

    "下拉列表框美化"这一主题,主要是指通过特定的技术手段改进标准Combobox控件的外观,使其更加吸引人,提升用户体验。在这个过程中,"贴图"是一种常用的方法,它是指将图像应用到控件表面,以改变其视觉效果。 ...

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    jQuery下拉列表框日期选择代码

    在"jQuery下拉列表框日期选择代码"这个场景中,jQuery将用于响应用户的交互,如点击input框,以及控制日期时间选择器的显示和隐藏。 接下来,我们需要创建一个HTML结构,通常包含一个input元素,作为用户触发日期...

    可输入的html下拉列表框,自带筛选

    我们可以利用CSS的`display`属性来控制下拉列表的可见性,使其在用户输入时显示,选择完成后隐藏。 此外,现代Web开发框架,如Vue.js或React,提供了更强大的数据绑定和组件化能力,可以更方便地实现这种功能。在...

    多選下拉列表框

    在IT领域,多选下拉列表框是一种常见的用户界面组件,它允许用户在下拉菜单中选择一个或多个选项。这种交互方式广泛应用于各种应用程序,如网页表单、桌面软件和移动应用,以提高用户体验并优化屏幕空间。下面将详细...

    jquery自动滚动下拉列表框.rar

    在`css`文件中,我们可以设置下拉列表框的样式,使其符合项目需求。例如,可以设定宽度、高度、边框等属性,确保其视觉效果良好: ```css #scrollableSelect { width: 200px; height: 200px; overflow-y: scroll...

    手动样式仿select下拉列表框

    "手动样式仿select下拉列表框"就是一个这样的实践,它通过CSS和JavaScript等技术,使得原本样式单一的SELECT元素变得更为美观、交互性强。 在传统的HTML中,SELECT元素用于创建下拉列表,但其默认样式受到浏览器的...

    带有复选框的下拉列表

    首先,我们来探讨第一种实现方式——使用DIV控制的带有复选框的下拉列表。这种方式主要基于HTML和CSS,通过创建一个看起来像下拉列表的结构来模拟该功能。HTML部分会包含一组包裹在`&lt;div&gt;`标签中的`...

    自绘下拉列表框

    当我们谈论“自绘下拉列表框”时,我们指的是通过编写代码来控制Combobox控件的显示样式,而不是依赖系统默认的绘制方式。这通常用于实现个性化的用户界面,如自定义颜色、字体、图标或者复杂的布局。 1. **...

    用PopuWindow写的一个简单带动画的下拉列表框

    在Android应用开发中,创建一个具有动画效果的可自定义的下拉列表框是一个常见的需求。PopuWindow是Android SDK提供的一种轻量级窗口组件,它可以帮助开发者实现类似下拉菜单的效果,同时允许我们高度定制界面和添加...

    带复选框的下拉列表

    "带复选框的下拉列表"是一种交互式控件,常见于各种应用程序和网站中,允许用户在一组选项中进行多项选择。这个主题涉及到前端开发、GUI设计以及Windows API编程。 首先,我们来详细探讨这种控件的设计原理。带复选...

    仿baidu下拉列表框

    5. **可定制的UI**:百度下拉列表框的设计简洁而直观,可以自定义样式以适应不同的网站设计。这涉及到CSS(层叠样式表)的应用,用于控制元素的布局、颜色、字体等视觉效果。 6. **性能优化**:由于涉及到实时更新...

    Android自定义下拉列表框控件源码

    2. **视图状态管理**:控制下拉列表的显示和隐藏是核心功能。这需要处理触摸事件,监听用户是否点击了触发下拉的元素,并相应地展开或隐藏列表。 3. **数据绑定**:控件需要能够加载和展示数据。这可能通过适配器...

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

    本项目结合了JavaScript库jQuery和CSS3的新特性,为下拉列表框提供了一种美观的展示方式。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画效果。在这个项目中,jQuery被用来处理...

    下拉列表完全模糊匹配

    最关键的部分是使用JavaScript监听搜索框的输入事件,当用户输入时,遍历下拉列表的所有选项,检查是否包含用户输入的关键字,并根据匹配情况动态更新下拉列表的可见性。这里我们可以使用`addEventListener`来绑定...

    下拉列表选择框

    `utils.dropTable.css`是CSS样式文件,用于定义下拉列表选择框的外观和布局。CSS(层叠样式表)允许开发者控制网页的呈现效果,包括字体、颜色、大小、布局等。在这个插件中,CSS将确保下拉列表在不同浏览器上的显示...

    jquery自动滚动下拉列表框.zip

    CSS(层叠样式表)可以用来定制下拉列表框的外观,例如改变字体、颜色、背景等。但实现滚动效果则需要借助JavaScript或者jQuery。我们可以用jQuery选择器来定位到特定的下拉列表框,然后通过其提供的方法来控制滚动...

    组态王下拉式组合框使用样例

    本样例主要聚焦于"组态王下拉式组合框"的使用,这是一个在人机交互界面(HMI)设计中常用的控件,用于提供用户选择项的下拉列表。 1. **下拉式组合框的定义与功能** 下拉式组合框是HMI界面中的一个元素,它由一个...

    VC.NET2005_ComboBox下拉列表框

    综上所述,"VC.NET2005_ComboBox下拉列表框"涉及的核心知识点包括ComboBox控件的使用、事件处理、数据绑定、自定义样式以及用户输入验证。提供的实例和工作文档资料将有助于更深入地理解这些概念,并能帮助开发者在...

    jquery仿百度下拉列表搜索框

    2. **CSS样式**:使用jquery-ui.css来美化界面,包括搜索框和下拉列表的样式。jQuery UI库提供了丰富的CSS样式和主题,可以轻松定制UI外观。 3. **jQuery代码**:引入jQuery库(jquery.js)和jQuery UI库(jquery-...

Global site tag (gtag.js) - Google Analytics