HTML请选择编程,html – 设计选择标记

我正在尝试设计一个Select标签,如下图所示：

不知怎的,我设法通过将select标签包装在div中来设计它.但问题是,当我点击设计的箭头时,选择标签不起作用或显示所有列表.

我期待的是当我点击箭头时,select标签应该显示所有选项.因为箭头部分是使用父包装元素伪元素生成的,所以没有发生这种情况.因为it seems to be not working,我没有使用伪元素选择器选择标签.

我可以使用background-image来解决这个问题到父包装器,但由于我有权尽可能地更改html,我正在寻找更好的方法而不使用图像或javascript,即只使用CSS.

EEE

ECE

EIE

.select-wrapper {

display:inline-block;

border:1px solid #bbbbbb;

position:relative;

width:120px;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

margin-top: 10px;

}

.select-wrapper:before{

content: "";

position:absolute;

right: 5px;

top:8px;

border-width: 5px 5px 5px 5px;

border-style: solid;

border-color: #666666 transparent transparent transparent ;

z-index:3;

}

.select-wrapper:after {

content:"";

display:block;

position:absolute;

top:0px;

bottom:0px;

width:20px;

right:0px;

border-left:1px solid #bababa;

background-color:#ededed;

-webkit-border-top-right-radius:5px;

-moz-border-top-right-radius:5px;

border-top-right-radius:5px;

-webkit-border-bottom-right-radius:5px;

-moz-border-bottom-right-radius:5px;

border-bottom-right-radius:5px;

}

select {

width:100%;

background-color:#ededed;

border:none;

outline:none;

padding:0px;

margin:0px;

position:relative;

}

HTML请选择编程,html – 设计选择标记相关推荐

java程序运行图形_java编程要用到继承的方法图形计算器项目：实现一个图形计算器，程序运行后显示界面：请选择图形： 1 圆 2 矩形...
共回答了12个问题采纳率:91.7% 代码如下.输入参数和计算结果都为整数.具体类型请自行修改.import java.util.Scanner; public class Test { public ...
如何为编程爱好者设计一款好玩的智能硬件（三）——该选什么样的MCU呢？
一.我的构想:如何为编程爱好者设计一款好玩的智能硬件(一)--即插即用.积木化.功能重组的智能硬件模块构想二.别人家的孩子:如何为编程爱好者设计一款好玩的智能硬件(二)--别人是如何设计硬件积木的! ...
如何为编程爱好者设计一款好玩的智能硬件（十）——无线2.4G通信模块研究·一篇说完...
六.温湿度传感器DHT11驱动封装(下):如何为编程爱好者设计一款好玩的智能硬件(六)--初尝试·把温湿度给收集了(下)! 七.点阵字符型液晶显示模块LCD1602驱动封装(上):如何为编程爱好者设计 ...
C++软件技术与编程课程设计-图书管理系统
目录设计要求程序流图代码部分 book.h book.cpp staff.h staff.cpp draw.h draw.cpp main.cpp readme.md 效果图设计要求利用c+ ...
计算机程序数据随机变化,计算机程序编程课程设计报告(马尔可夫链算法生成随机可读文本)...
<计算机程序编程课程设计报告(马尔可夫链算法生成随机可读文本)>由会员分享,可在线阅读,更多相关<计算机程序编程课程设计报告(马尔可夫链算法生成随机可读文本)(15页珍藏版)> ...
python的选择结构教学设计_python选择结构教学设计
<python选择结构教学设计>由会员分享,可在线阅读,更多相关<python选择结构教学设计(3页珍藏版)>请在人人文库网上搜索. 1.项目主题用选择结构程序做出判断备课人张 ...
小学生计算机课如何管教,少年巧编程| 如何给孩子选择编程课
原标题:少年巧编程| 如何给孩子选择编程课随着编程市场的热炒,家长的焦虑感又增长了不少.其实之前的信息技术教育报在2000年就有相关的小学教材,部分实现小学也有开展课程.在互联网的大潮下,中国的科技 ...
数据库编程和设计——JDBC技术
JDBC核心技术一.JDBC入门 1 JDBC概述 1.1 数据的持久化持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应用,数据持久化意 ...
java shape 空间操作类_设计三个类：几何形状类（Shape）、圆类（Circle）、矩形类（.,请编写 Java程序,设计一个“形状rdquo...
问题标题设计三个类:几何形状类(Shape).圆类(Circle).矩形类(.,请编写 Java程序,设计一个"形状&rdquo 2019-5-10来自ip:17.175.174. ...
领动机器人教育_【领动知识科普】各阶段孩子该如何选择编程？乐高、机器人、编程间又有什么关系？...
我们常说,学习编程可以给孩子带来"编程思维",而"编程思维"所带给孩子的好处也是很多的.比如:锻炼孩子条理解决问题能力:培养孩子创造创新能力等. 那么关于少儿编 ...

HTML请选择编程,html – 设计选择标记

HTML请选择编程,html – 设计选择标记相关推荐

最新文章

热门文章