Pure CSS alternative to drop-down selection box select_html/css

Home

Web Front-end

HTML Tutorial

Pure CSS alternative to drop-down selection box select_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

cssselectdrop downplanchoose

这篇教程中，我将给大家展示表单元素下拉选择框select的CSS替代方案。该方法采用css来实现，看上去非常简单。我们用radio标签列表来模拟下拉列表，选择一个radio可以很好的模拟出select中选择一个元素的效果。

一：HTML

下面是我们在form表单里面用到的html代码：

.代码

Choose your beer
Cul Dorcha
Rowers Red Ale
Belfast Ale
O'Hara Irish Stout

2: Logic sketch

For the explanation It seems more intuitive. I tried to draw the following sketch to describe it. I hope it can be expressed clearly. Front-end UI sharing

3: CSS code

In order to make the tutorial look more concise, I have omitted some CSS code for visual effects. (For example, the CSS for drawing the arrow part) - You can view the full version of the code in the attachment. For the same reason I've also omitted prefixes that can be specific to different browsers.

css of radio-container:

.code

radio-container {
position: relative;
height: 4em; /* 3em (being the max-height of the inner container) 1em ("margin") */
}
.radio-container:hover {
z-index: 9999; }

CSS of elements contained in radio-container: Front-end UI sharing

.code

.radio-options {
position: absolute;
max -height: 3em;
width: 100%;
overflow: hidden;
transition: 0.7s;
}
.radio-options:hover {
max-height: 100em;
}

then

.code

.radio-options .toggle {
position: relative;
cursor: pointer;
padding: 0.75em;
background: darkgreen;
border-radius: 10px;
z-index: 1; }
* li are stacked at the same position as .toggle, only .toggle is visible */
.radio-options li {
position: absolute;
top: 0 ;
left: 0;
width: 100%;
height: 100%;
}
.radio-options label {
display: block;
opacity: 0;
transition: 0s; }

In order to hide the input, we can use display: none to achieve the goal, but this method will not focus on the relevant input when clicking the label in some browsers (such as some mobile browsers). Front-end UI sharing

.code

.radio-options input {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 3em;
opacity: 0;
z-index:1;
cursor: pointer;
}

Four: Move the mouse up css code

According to the above code, let’s take a closer look at what happens when the hover goes up. The z-index of .radio-container is a very large value, and at the same time, the z-index of .radio-options The max-height attribute has also become larger (to 100em), we continue:

. Code

/* li elements have a normal flow within the .radio-options container */
.radio-options:hover li {
position: relative; }
.radio-options:hover label {
opacity: 1;
transition: 0.5s; }

五：选中状态

To style the checked option we will use the general sibling selector. It uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element. The first element (E) has to occur before the second (F) one and they have to share the same parent (li items in our case).前端UI分享

If one of the radio is checked, we’ll see its label instead of the toggle :

.代码

.radio-options input:checked ~ label {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 1;
/* is above the .toggle so is visible */
z-index: 2;
/* has tha same styles as .toggle */
padding: 0.75em;
background: darkgreen;
border-radius: 10px; }

On hover it returns to the normal flow

.代码

.radio-options:hover input:checked ~ label {
position: static;
border-radius: 0; }

六：移动设备上所需的修正

因为我们响应的是鼠标的hover事件，所以必须针对移动设备做响应（移动设备没有鼠标）。一种解决办法是将radio 的label始终可见。我先用用自定义的modernizr build来检测触摸设备，然后添加如下的脚本：

.代码

$(document).ready(function(){
if (Modernizr.touch) {
$(".radio-options").bind("click", function(event) {
if (!($(this).parent('.radio-container').hasClass("active"))) {
$(this).parent('.radio-container').addClass("active");
event.stopPropagation();
}
});
$(".toggle").bind("click", function(){
$(this).parents('.radio-container').removeClass("active");
return false;
});
}
})

在css中我如下修改每一个:hover的定义：前端UI分享

.代码

.no-touch .radio-container:hover, .active.radio-container {
z-index: 9999; }
.no-touch .radio-options:hover, .active .radio-options {
max-height: 100em;
}
.no-touch .radio-options:hover li, .active .radio-options li {
position: relative; }
.no-touch .radio-options:hover label, .active .radio-options label {
opacity: 1;
transition: 0.5s; }
....

七：IE8下如何处理

是否兼容IE8取决于你自己，这部分并不是本教程的重点

.代码

css

.code

.radio-options .checked label {
position: absolute;
top: 0 ;
left: 0;
right: 0;
padding: 0.75em;
background: #1b9e4d;
visibility : visible;
z-index: 2; }
.... That helps, thank you.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Visual web development tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software