I got a custom HTML-object and every way I tried to center the class, it failed. Does anybody have an idea? Kind regards.
I tried . Other objects ere centered, only this one wasn't. I tried margin: 0px auto. I tried . My custom object keeps left-aligned. I think there could be an attribute
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
Your container is what needs to be centered, not the items within it. The addition is justify-content: center; within the .switch-mode class.
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
On .switch-mode, you have used flex layout. So add justify-content: center on .switch-mode class and it will be aligned on center position.
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
Related
I used ngx-print to print a section of my page. In that section, there is toggle button (switche) in two places. Both of them get updated using the same ngmodel. In the page, it's getting updated, but when I print it(used Microsoft print to pdf), it's stuck in the first change I did. ex:- If I turn on the button and then turn it off,then hit print, the button in the printed pdf is always turned off. Below is just how the buttons and the layout is used.
input {
display: none;
}
.toggle {
position: relative;
cursor: pointer;
}
.toggle:before {
content: "";
display: block;
width: 26px;
height: 10px;
border-radius: 15px;
background-color: #b0aeae;
}
.toggle span {
position: absolute;
top: -4px;
left: -1px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fafafa;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
.toggle span .fas {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: white;
}
.checkbox:checked + .toggle:before {
background: #51a3f5;
}
.checkbox:checked + .toggle span {
left: -24px;
transform: translateX(35px);
background: #1976d2;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous" />
<!--Section that we use-->
<div class="switch-with-text d-flex align-items-center">
<input
type="checkbox"
id="checkbox1"
class="checkbox"
formControlName="stopSmoking"
[(ngModel)]="isChecked_stopSmoking"
(change)="recalculateScore('smoking',$event)"
/>
<label for="checkbox1" class="toggle">
<span>
<i class="fas"></i>
<i class="fas"></i>
</span>
</label>
<p>Stop smoking</p>
</div>
<!--Section that is getting printed-->
<div class="switch-with-text d-flex align-items-center" id="pdf">
<input
type="checkbox"
id="pdf_checkbox1"
class="checkbox"
[(ngModel)]="isChecked_stopSmoking"
/>
<label for="pdf_checkbox1" class="toggle">
<span>
<i class="fas"></i>
<i class="fas"></i>
</span>
</label>
<p class="switch-text">Stop smoking</p>
</div>
<button
class="btn btn-primary"
printSectionId="pdf"
ngxPrint
[useExistingCss]="true"
styleSheetFile="assets/css/print.css"
PrintWithCustomCss
>PRINT</button>
How do I fix this issue?
I have an issue with my radio input.
It lets me change to the second option if im clicking on the label but it doesnt work for the first option. I can only choose the first option if im clicking on the selection-circle but i dont want to display it. It should work with a click on the text.
Any ideas?
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-field input {
position: absolute;
clip: rect(0, 0, 0, 0);
height: 100px;
width: 100px;
border: 1px;
/* overflow: hidden; */
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 10%;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #cc7676;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<div class="switch-field">
<input type="radio" id="strang1u3" name="switch-one" onchange="speichern(); clicksound()" />
<label for="strang1u2">Strang 1 & 3</label>
<input type="radio" id="strang2u4" name="switch-one" onchange="speichern(); clicksound()" />
<label for="strang2u4">Strang 2 & 4</label>
</div>
Your first label's for (strang1u2) and input's id (strang1u3) don't match. This may be causing this as the label isn't associated with the input.
I found this a nemorphism toggle and can´t figure out how to change the background if checked. I am aware how basic this question is. I did it several times with basic toggle checkboxes but it seems either I am confused or this design pattern is ignoring my attempts.
So far I tried different solutions as:
input[type="checkbox"]:checked {
background: red
}
or
.toggle:checked {
background: red
}
Unfortunately none of them does the job. I am aware its a basic question and thought you guys could direct me to the correct solution as I am struggling.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
You're trying to apply background on the input but the indicator class is overriding it. Why not give the property to the indicator class itself?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
background: red;
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
You don't have to put the input inside the div, you can put it before it and as long as it's in the label it will work fine. And then you can update the selectors
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
transition: background 0.3s ease;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
input[type=checkbox] +.toggle { /* Now you can select the div next to the input */
background: yellow
}
.toggle-state:checked + .toggle {
background: red;
}
.toggle-state:checked + .toggle .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="toggle">
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox]:checked ~ .indicator {
background: red;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>
I have a problem with a textbox and a label on a html page. I need to put two textboxes and two labels on the right size of the page, but I can't. I try with some answers from stackoverflow but it doesn't work too, it always put the textbox and the label down from the first textbox and label.
I put my css code:
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0 auto 0 auto;
vertical-align: middle;
float: center;
max-width: 70em;
}
a {
color: #ff6f00;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.card, header, nav, article {
margin: 1em .5em;
border-radius: .25em;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
overflow: hidden;
}
header {
text-align: center;
background-color: #3f51b5;
color: white;
margin-top: 0;
margin-bottom: 0;
padding: .25em;
border-radius: 0 0 .25em .25em;
}
main {
width: auto;
overflow: hidden;
margin-bottom: 5em;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #3f51b5;
color: white;
text-align: center;
box-shadow: 0 -.125em .5em rgba(0, 0, 0, .4);
}
footer a {
color: #ffd740;
}
nav {
float: left;
width: 20em;
background-color: #eee;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li a {
display: block;
color: black;
padding: .5em 1em;
transition: background-color .25s;
}
nav li a:hover {
background-color: #ffc107;
text-decoration: none;
transition: background-color .25s;
}
article {
background-color: #eeeeee;
padding: .5em;
}
article h1 {
border-bottom: 1px solid rgba(0, 0, 0, .4);
}
article img {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
transition: box-shadow .25s;
}
article img:hover {
box-shadow: 0 .3em 1em rgba(0, 0, 0, .4);
transition: box-shadow .25s;
}
hr {
border-style: none;
background-color: rgba(0, 0, 0, .4);
height: 1px;
}
pre {
overflow: auto;
}
#media only screen and (max-width: 45em) {
body {
min-height: calc(100vh);
display: flex;
flex-direction: column;
}
nav {
float: none;
width: auto;
}
main {
flex-grow: 2;
margin-bottom: .25em;
}
footer {
position: relative;
padding: .25em;
width: auto;
}
}
/* Forms */
input[type=button], input[type=submit] {
background-color: white;
padding: .5em;
border: 0;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
border-radius: .25em;
transition: box-shadow .125s;
}
input[type=button]:hover, input[type=submit]:hover {
box-shadow: 0 .3em 1em rgba(0, 0, 0, .4);
transition: box-shadow .125s;
}
input[type=button]:active, input[type=submit]:active {
box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4);
transition: box-shadow .0625s;
}
input[type=text], input[type=number], input[type=password], select {
width: 10em;
background-color: white;
padding: .5em;
border: 0;
box-shadow: inset 0 .0625em .25em rgba(0, 0, 0, .4);
border-radius: .25em;
transition: box-shadow .25s, width .4s ease-in-out;
}
input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, select:hover {
box-shadow: inset 0 .0625em .5em rgba(0, 0, 0, .4);
transition: box-shadow .25s, width .4s ease-in-out;
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus {
box-shadow: inset 0 .0625em .375em rgba(0, 0, 0, .4);
width: 20em;
transition: box-shadow .25s, width .4s ease-in-out;
}
input[type=text]:disabled, input[type=number]:disabled, input[type=password]:disabled, select:disabled {
background-color: #eee;
}
input[type=radio], input[type=checkbox] {
box-shadow: 0 .25em .5em rgba(0, 0, 0, .4);
border-radius: .5em;
}
input[type=radio]:active, input[type=checkbox]:active {
box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4);
}
input[type=radio]:disabled, input[type=checkbox]:disabled {
background-color: #eee;
box-shadow: 0 .0625em .25em rgba(0, 0, 0, .4);
}
And also I put my html code, only where I want to put a textview and a label on the right of the screen:
<html>
<head>
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/main-style.css">
</head>
<body>
<header>
<p>TEST</p>
</header>
<main>
<article>
<h1>Insert</h1>
<form action="index.php" method="get">
<p>Label: <input type="number" name="Label" <?php if ($estadoBD != 0) echo "disabled value=\"$LabelDB\" "; ?>/></p>
<p>Textview: <input type="number" name="Textview" <?php if ($estadoBD != 0) echo "disabled value=\"$TextviewDB\" "; ?>/></p>
<p><input type="submit" /></p>
</form>
<?php if($msg) { ?>
<p><?php echo $msg; ?></p>
<?php } ?>
<?php if($msg_estado) { ?>
<p><?php echo $msg_estado; ?></p>
<?php } ?>
</article>
</main>
<footer>
<p>TEST</p>
</footer>
</body>
</html>
I want one more textview and label, at the same line of the other two, but on the right of the screen.
Can anyone helps me? Thanks a lot!
Wrap your label and input in a div with a class like this:
<div class="label-wrapper">
<label>My left label</label>
<input type="text" />
</div>
and then copy paste it and put it below it so it looks like this:
<div class="label-container">
<div class="label-wrapper">
<label>My left label</label>
<input type="text" />
</div>
<div class="label-wrapper">
<label>My left label</label>
<input type="text" />
</div>
</div>
Now you can use CSS to put them next to each other like this:
.label-wrapper {
width: 50%;
float: left;
}
.label-container:after {
clear: both;
display: block;
content: "";
}
and then you can mixture and test things inside, like right align and such. hope this will get you underway!
Moving lablel to right
you should use style ...
put style in label like this;
<label style="margin-left:12cm";>
Please take a look at the following CodePen. There you can see my custom range input. I want the tick positions of the slider to be shown and for that I added the datalist:
fieldset {
border: 2px solid #48530D;
padding-top: 27px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 4px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #a4b162;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #a6b365;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #a4b162;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #a2af5f;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #a4b162;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
height: 8px;
}
input[type=range]:focus::-ms-fill-lower {
background: #a4b162;
}
input[type=range]:focus::-ms-fill-upper {
background: #a6b365;
}
<fieldset>
<form>
<input max="6" min="1" step="1" name="question_three" type="range" list="question_three_list" />
<datalist id="question_three_list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</datalist>
</form>
</fieldset>
But unfortunately nothing is showing up. What I wanted to achieve is the
following (ugly example created in MS Paint, but I guess you will get what I mean):
So how can I achieve that?
I know my answer is way way late, but I keep coming back here when I try to find doing the same thing. I did manage to display tickmarks using the following settings.
The code results in the following:
* {
box-sizing: border-box;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 25px;
background: #D3D3D3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #FF0000;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #FF0000;
cursor: pointer;
}
.sliderticks {
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
}
<div class="range">
<input type="range" min="0" max="5" value="2" class="slider">
<div class="sliderticks">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
-webkit-appearance: none;
The above removes platform-native styling (Chrome / Safari), which removes the ticks.
You can get more information here, but unfortunately, styling support for input ranges (particularly ticks) is still pretty terrible.
document.querySelectorAll(".__range-step").forEach(function(ctrl) {
var el = ctrl.querySelector('input');
var output = ctrl.querySelector('output');
var newPoint, newPlace, offset;
el.oninput =function(){
// colorize step options
ctrl.querySelectorAll("option").forEach(function(opt) {
if(opt.value<=el.valueAsNumber)
opt.style.backgroundColor = '#48530d';
else
opt.style.backgroundColor = '#a4b162';
});
};
el.oninput();
});
.__range input
{
outline: none;
-webkit-appearance: none;
background-color: #aaa;
height: 3px;
width: 100%;
margin: 10px auto;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #a4b162;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
.__range-step{
position: relative;
}
.__range-max{
float: right;
}
.__range-step datalist {
position:relative;
display: flex;
justify-content: space-between;
height: auto;
bottom: 16px;
/* disable text selection */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
/* disable click events */
pointer-events:none;
}
.__range-step datalist option {
width: 10px;
height: 10px;
min-height: 10px;
padding:0;
line-height: 40px;
}
.__range{
margin:10px 40px;
}
<div class="__range">
<input value="4" type="range" max="6" min="1" step="1" list="ticks1">
</div>
<div class="__range __range-step">
<input value="4" type="range" max="6" min="1" step="1" list="ticks1">
<datalist id="ticks1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</datalist>
</div>