失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html菜单箭头 html – 纯CSS选择菜单/下拉菜单:如何制作右箭头功能?

html菜单箭头 html – 纯CSS选择菜单/下拉菜单:如何制作右箭头功能?

时间:2020-06-28 02:37:33

相关推荐

html菜单箭头 html – 纯CSS选择菜单/下拉菜单:如何制作右箭头功能?

我根据解决方案使用自定义选择/下拉菜单:

/a/10190884/1318135

这个功能很棒,只有在单击该框时才显示选项.单击右侧的“箭头”不会显示下拉选项.什么是变通方法?

HTML:

Sushi

Blue cheese with crackers

Steak

Other

CSS:

label.custom-select {

position: relative;

display: inline-block;

}

.custom-select select {

display: inline-block;

padding: 4px 3px 3px 5px;

margin: 0;

font: inherit;

outline:none; /* remove focus ring from Webkit */

line-height: 1.2;

background: #000;

color:white;

border:0;

}

/* Select arrow styling */

.custom-select:after {

content: "▼";

position: absolute;

top: 0;

right: 0;

bottom: 0;

font-size: 60%;

line-height: 30px;

padding: 0 7px;

background: #000;

color: white;

}

.no-pointer-events .custom-select:after {

content: none;

}

如果觉得《html菜单箭头 html – 纯CSS选择菜单/下拉菜单:如何制作右箭头功能?》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。