`
My_Imagination
  • 浏览: 13680 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

去掉下拉框的边线和三角箭头及隐藏或禁用下拉框

    博客分类:
  • html
 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>去掉下拉框的边线和三角箭头及隐藏或禁用下拉框</title>
<style type="text/css">
<!--
body {
font-size: 12px;

}
.select-style{
position:absolute; 
overflow:hidden;
}
.select-style select{
margin:-2px;
margin-right:-20px;
}

-->
</style>
</head>
<body>

//去掉下拉框的边线和三角箭头
<span class="select-style"><select name="selStyle">
     <option value="0" selected="selected">这是下拉框哦,点我</option>
     <option value="1">广州</option>
     <option value="2">上海</option>
     <option value="5">北京</option>
     </select>
</span>

//隐藏或禁用下拉框
<span onmousemove="this.setCapture();" onmouseout="this.releaseCapture();" onfocus="this.blur();"><select

name="selStyle">
     <option value="0" selected="selected">这是下拉框哦,点我</option>
     <option value="1">广州</option>
     <option value="2">上海</option>
     <option value="5">北京</option>
     </select>
</span>

</body>
</html>

分享到:
评论

相关推荐

    可以输入的下拉框 下拉框和文本框组合共用

    下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框....

    下拉框实现树结构带禁用.vue

    下拉框实现树结构带禁用.vue

    去掉下拉框的边框

    去除下拉框的边框,包括下拉的按钮,内有demo

    微信小程序自定义下拉框,点击空白处隐藏

    创建一个名为 `customDropdown` 的组件,包含一个显示下拉框的容器和一个用于触发下拉框显示/隐藏的按钮。 2. **WXML 结构**: 在 `customDropdown` 的 WXML 文件中,构建下拉框的结构。这通常包括一个可点击的...

    下拉框和文本框组合共用-可以输入的下拉框ok

    在网页设计和开发中,"下拉框和文本框组合共用-可以输入的下拉框"是一个常见的交互元素,它结合了下拉选择框(Dropdown)和输入文本框(Input Text)的功能,以提供更灵活、用户友好的界面。这种设计通常用于场景,...

    下拉框设置为只读模式时不再弹出下拉框

    在网页设计和开发中,经常会遇到需要对交互元素进行特定控制的情况,比如将下拉框(Dropdown)设置为只读模式。"下拉框设置为只读模式时不再弹出下拉框"这个主题,主要涉及到HTML、CSS以及可能的JavaScript技术。...

    QT下拉框样式表设置

    ### QT下拉框样式表设置详解 在QT中,我们经常需要对用户界面进行自定义样式设置以满足不同场景下的视觉需求。其中,`QComboBox`(即下拉框)是一种常用的控件,用于提供一系列选项供用户选择。本文将详细介绍如何...

    下拉框值触发另一个下拉框

    在网页设计和开发中,交互性是提升用户体验的关键因素之一。"下拉框值触发另一个下拉框"这个功能就是一种常见的交互设计,通常应用于表单或者数据选择场景。这样的设计能够帮助用户根据前一个选择来过滤或定制后一个...

    使用javascript实现下拉框的动态控制

    资源名称:使用Javascript实现下拉框的动态控制   内容简介: 使用Javascript实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用,便于 操作者从…组选项...

    通过css改变下拉框样式

    因此,我们需要自定义样式来隐藏默认的框线和箭头。 1. 隐藏select外部的框: 要隐藏`&lt;select&gt;`元素的外部边框,我们可以使用以下CSS代码: ```css select { border: none; outline: none; } ``` 这将移除元素的...

    6种样式的下拉框

    在网页设计和开发中,下拉框(Dropdown)是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个。"6种样式的下拉框"项目提供了多种不同风格和效果的下拉框解决方案,旨在提升用户体验并增强网站的视觉...

    CSS 学习 三角 border transparent 下拉框

    标题中的“CSS学习 三角 border transparent 下拉框”是指在CSS样式设计中,如何利用边框(border)的透明属性创建三角形以及在下拉框(drop-down list)中应用这一技巧。在网页设计中,三角形通常用于指示箭头或方向,...

    jquery+html自定义select下拉框,下拉框美化

    3. **箭头图标**:替换默认的下拉箭头,可以使用伪元素(如`:before`或`:after`)结合CSS内容属性(`content`),或者使用背景图片。 4. **悬停和选中状态**:为鼠标悬停和选中状态添加不同的样式,以增强用户反馈。 5...

    js多选下拉框多选下拉框多选下拉框

    本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本的多选下拉框通过`&lt;select&gt;`标签创建,`multiple`属性用于开启多选功能。例如: ```html 选项1 ...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。在Web开发中,Bootstrap框架提供了丰富的样式和组件,大大简化了网页设计的工作...

    EXTJS 选下拉框,并取得下拉框的值

    在EXTJS中,下拉框(ComboBox)是一种常见的UI组件,常用于用户选择一个或多个预定义的选项。本篇文章将详细讲解如何在EXTJS中操作下拉框,以及如何获取用户选定的值。 首先,创建一个基本的EXTJS下拉框需要定义`...

    Cocos Create 实现下拉框效果

    4. **动态显示列表**:列表的显示和隐藏可以通过改变其显示属性(如`visible`或`active`)来控制。同时,为了实现下拉效果,可能需要调整列表的位置,使其相对于按钮下方对齐。 5. **交互处理**:当用户在列表中...

    Aspose.Cells下拉框及导入导出

    通过Aspose.Cells,开发人员可以轻松地在程序中实现Excel下拉框功能,提高用户界面的友好性和数据输入的准确性。无论是在数据导入、导出还是日常操作中,这个功能都能极大地增强Excel文件的交互性。

    下拉框添加删除按钮

    默认情况下,用户只能看到一个选项,其余选项隐藏在下拉菜单中,只有当用户点击或触摸下拉箭头时才会显示。下拉框通常用于节省空间,特别是在有限的屏幕区域中展示大量选项时。 在下拉框中添加删除按钮的功能,是...

    树形下拉框样式

    在IT领域,"树形下拉框样式"是一种常见的用户界面元素,主要用于数据组织和导航。它结合了传统的下拉框功能与树形结构,使得用户可以方便地浏览和选择层级关系的数据。这种设计通常应用于文件系统、组织结构或者分类...

Global site tag (gtag.js) - Google Analytics