Sliding Single Select

Developer
Aaron Levine
Size
3,968 Kb
Views
2,024
  1. Sliding Single Select Previews
  2. Sliding Single Select HTML Codes
  3. Sliding Single Select CSS Codes

How do I make an sliding single select?

What is a sliding single select? How do you make a sliding single select? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Sliding Single Select Previews
IQ Test

Sliding Single Select - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding Single Select</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta content='width=device-width, height=device-height, minimum-scale=1, maximum-scale=1' name='viewport'>
<h1>Pure CSS Sliding Single Select</h1>
<h3>Doesn't work in Moz... Any Suggestions?</h3>
<div class='text-center'> <div class='container'> <input checked class='slide' id='slide-1' name='slide' type='radio'> <label data-text='One' for='slide-1'></label> <input class='slide' id='slide-2' name='slide' type='radio'> <label data-text='Two' for='slide-2'></label> <input class='slide' id='slide-3' name='slide' type='radio'> <label data-text='Three' for='slide-3'></label> <input class='slide' id='slide-4' name='slide' type='radio'> <label data-text='Four' for='slide-4'></label> </div>
</div>
<br>
<br>
<p>Uses transform-origin to control the direction of the slide based on the previous sibling's :checked pseudo-attribute. Then it sets a delay on the animation of that property in one direction, but not the other to make sure that it always fills in th eproper direction.</p>
</body>
</html>

Sliding Single Select - Script Codes CSS Codes

input[type="radio"].slide { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; background: none; display: none;
}
input[type="radio"].slide, input[type="radio"].slide * { box-sizing: border-box;
}
input[type="radio"].slide:checked + label:before { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 0.5;
}
input[type="radio"].slide:checked ~ .slide + label:before { /*-webkit-transition: -webkit-transform 0.25s, opacity 0.25s, -webkit-transform-origin 0 0; -moz-transition: -moz-transform 0.25s, opacity 0.25s, -moz-transform-origin 0 0; -ms-transition: -ms-transform 0.25s, opacity 0.25s, -ms-transform-origin 0 00; -o-transition: -o-transform 0.25s, opacity 0.25s, -o-transform-origin 0 00; transition: transform 0.25s, opacity 0.25s, transform-origin 0 0;*/ -moz-transition: -moz-transform 0.25s, opacity 0.25s, -moz-transform-origin 0; -o-transition: -o-transform 0.25s, opacity 0.25s, -o-transform-origin 0; -webkit-transition: -webkit-transform 0.25s, opacity 0.25s, -webkit-transform-origin 0; transition: transform 0.25s, opacity 0.25s, transform-origin 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left;
}
input[type="radio"].slide + label { -webkit-tap-highlight-color: transparent; position: relative; width: 25%; margin: 0; float: left; text-align: center;
}
input[type="radio"].slide + label, input[type="radio"].slide + label:before { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -moz-transition: -moz-transform 0.25s, opacity 0.25s, -moz-transform-origin 0.25s 0; -o-transition: -o-transform 0.25s, opacity 0.25s, -o-transform-origin 0.25s 0; -webkit-transition: -webkit-transform 0.25s, opacity 0.25s, -webkit-transform-origin 0.25s 0; transition: transform 0.25s, opacity 0.25s, transform-origin 0.25s 0;
}
input[type="radio"].slide + label:active, input[type="radio"].slide + label:focus { outline: none;
}
input[type="radio"].slide + label:after { content: attr(data-text); position: relative; display: inline-block; width: 100%; height: 2rem; box-sizing: border-box; line-height: 2; vertical-align: bottom; text-align: center; box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 0 -1px 0 0 #ccc;
}
input[type="radio"].slide + label:first-of-type:after { box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 0 -1px 0 0 #ccc, -1px 0 0 0 #ccc;
}
input[type="radio"].slide + label:first-of-type:before, input[type="radio"].slide + label:first-of-type:after { border-radius: 5px 0 0 5px;
}
input[type="radio"].slide + label:last-of-type:before, input[type="radio"].slide + label:last-of-type:after { border-radius: 0 5px 5px 0;
}
input[type="radio"].slide + label:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2rem; background-color: red; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -moz-transform: scale3d(0, 1, 0); -ms-transform: scale3d(0, 1, 0); -webkit-transform: scale3d(0, 1, 0); transform: scale3d(0, 1, 0); opacity: 0.5;
}
.text-center { text-align: center;
}
.container { display: inline-block; width: 40rem; max-width: 75%; height: 2rem; box-sizing: border-box;
}
h1, h3 { text-align: center;
}
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
Sliding Single Select - Script Codes
Sliding Single Select - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 3,968 Kb
Views 2,024
Do you need developer help for Sliding Single Select?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron Levine (Aldlevine) Script Codes
Name
Popup Modal
Flashy Rating Page
A Pen by Aaron Levine
Random Gradients - JS
CRT TV Page Load Animation
Progress
Touch Hover
Canvas Falloff Test
Price is Right Wheel - Better Inertia
Faceful Cubes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!