I can change other elements on the page using Jquery, but i can't seem to be able to toggle back to the default css class when it is using ::before..
Default Checkbox css in action
Checkbox Checked css in action
Now i have a button, that when its clicked, should reset my css to the default Checkbox - but it doesnt seem to work for me... The button stays green and it doesn't move to the left..
**
After button clicked example
**
CSS -
<style>
.checkbox {
appearance: none;
border: 2px solid #ccc;
border-color: red;
border-radius: 20px;
cursor: pointer;
height: 24px;
outline: none;
position: relative;
transition: 0.3s;
width: 37px;
}
.checkbox::before {
background: red;
border-radius: 50%;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 2px;
transition: 0.3s ease-in-out;
width: 15px;
}
.checkbox:checked::before {
background: green;
transform: translateX(18px);
}
.checkbox:checked {
border-color: green;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
.float-child-unknown {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
</style>
JS -
function outsideModalClick() {
$(document).ready(function() {
document.getElementById('button').onclick = function() {
$('.float-child').css('border', '2px solid red');
$('.iconShow').toggleClass('iconhide');
$('.checkbox:checked::before').toggleClass('.checkbox::before');
$('.checkbox:checked').toggleClass('.checkbox');
}
})
}
Edit - Still not working - css is not being applied
Related
How can I get the "select" element to open and show its option elements when I click inside "div" element?
In other words, I want to trigger the "select" element when I click to green zone.
HTML
<div>
<h3>Cities</h3>
<select>
<option>Berlin</option>
<option>Paris</option>
<option>London</option>
</select>
</div>
SCSS
body{
background-color: lightgray;
margin: 100px;
div{
display: inline-block;
padding: 50px;
background-color: green;
select{
width:300px;
&:focus{
outline: none;
}
}
}
}
https://codepen.io/mehmetguduk/pen/vYWVGPK
I would not recommend doing such thing but here you go:
$select-width: 400px;
$top-spacing: 100px;
$bottom-spacing: 50px;
$left-spacing: 30px;
body {
background-color: lightgray;
margin: 100px;
div {
display: inline-block;
background-color: green;
position: relative;
padding: $top-spacing 0 $bottom-spacing;
h3 {
left: $left-spacing;
position: absolute;
top: 40px;
}
select {
border-top: $top-spacing solid green;
border-bottom: $top-spacing solid green;
border-left: $left-spacing solid green;
border-right: $left-spacing solid green;
margin: -$top-spacing 0 (-$bottom-spacing);
cursor: pointer;
width: $select-width;
&:focus {
outline: none;
border-top: $top-spacing solid green;
// border has to stay 0 in order to keep options still
border-width: 0px;
width: $select-width - (2 * $left-spacing);
margin: -$top-spacing $left-spacing $bottom-spacing;
}
}
}
}
https://codepen.io/Gotzi/pen/LYejZJq
Here, i want to put some animation on input type range thumb.
here i done all the thing but i am not find the solution of animation effect on hover here is the sample example and My code..
Please give solution.
Here is example that exactly what i want.
#import 'bourbon';
$slider-width-number: 240;
$slider-width: #{$slider-width-number}px;
$slider-height: 2px;
$background-slider: #c7c7c7;
$background-filled-slider: #00BCD4;
$thumb-width: 18px;
$thumb-height: 18px;
$thumb-radius: 50%;
$thumb-background: #00BCD4;
$thumb-box-shadow: 2px 2px 1px 10px #00BCD4;
$thumb-border: 1px solid #777;
$shadow-size: -8px;
$fit-thumb-in-slider: -8px;
#function makelongshadow($color, $size) {
$val: 5px 0 0 $size $color;
#for $i from 6 through $slider-width-number {
$val: #{$val}, #{$i}px 0 0 $size #{$color};
}
#return $val;
}
div {
height: 100px;
display: flex;
justify-content: center;
}
input {
align-items: center;
appearance: none;
background: none;
cursor: pointer;
display: flex;
height: 100%;
min-height: 50px;
overflow: hidden;
width: $slider-width;
&:focus {
box-shadow: none;
outline: none;
}
&::-webkit-slider-runnable-track {
background: $background-filled-slider;
content: '';
height: $slider-height;
pointer-events: none;
}
&::-webkit-slider-thumb {
#include size($thumb-width $thumb-height);
appearance: none;
background: $thumb-background;
border-radius: $thumb-radius;
box-shadow: makelongshadow($background-slider, $shadow-size);
margin-top: $fit-thumb-in-slider;
border: $thumb-border;
}
&::-moz-range-track {
width: $slider-width;
height: $slider-height;
}
&::-moz-range-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
position: relative;
}
&:active::-webkit-slider-thumb {
transform: scale(2);
}
&::-moz-range-progress {
height: $slider-height;
background: $background-filled-slider;
border: 0;
margin-top: 0;
}
&::-ms-track {
background: transparent;
border: 0;
border-color: transparent;
border-radius: 0;
border-width: 0;
color: transparent;
height: $slider-height;
margin-top: 10px;
width: $slider-width;
}
&::-ms-thumb {
#include size($thumb-width $thumb-height);
background: $thumb-background;
border-radius: $thumb-radius;
border: $thumb-border;
}
&::-ms-fill-lower {
background: $background-filled-slider;
border-radius: 0;
}
&::-ms-fill-upper {
background: $background-slider;
border-radius: 0;
}
&::-ms-tooltip {
display: none;
}
}
<div>
<input type="range" min="0" max="100" value="40"/>
</div>
Here is the Codepen link:
https://codepen.io/anon/pen/qPpRJp
You can also edit Codepen
Here is what exactly you wanted. if you want more modification, go and see the documentation here https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
/* Special styling for WebKit/Blink */
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 10;
height: 15px;
width: 15px;
border-radius: 50%;
background: #3399cc;
cursor: pointer;
margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
transition : all .3s;
border:0;
}
input[type=range]:hover::-webkit-slider-thumb{
box-shadow: 0px 0px 0px 4px rgba(51, 153, 204, 0.49);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #3071a9;
}
<div>
<input type="range" min="0" max="100" value="40"/>
</div>
i want to make a range slider with some design in it. I have no idea how to stylize the input. http://prntscr.com/ebyoev like this one
The thing i want to do is, i dont know how to implement the circles on the start and end of the range slider and how to stylize the current circle range
https://jsfiddle.net/agghvm9t/ this is the fiddle
This is how far i have come
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
</div>
This is my css
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
THis is my jquery
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
I'd approach this with using pseudo elements. You can have one :before and one :after pseudo element and since you only need two - one at the beginning and one at the end, it might just work:
.range-slider {
position:relative;
}
.range-slider:before {
content: "";
position: absolute;
left: 0;
background-image: url("circle-image");
width: 25px;
height: 25px;
}
.range-slider:after {
content: "";
position: absolute;
right: 0;
background-image: url("circle-image");
width: 25px;
height: 25px;
}
To style the sliding circle, you can try something like this:
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: orange;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
border: 1px solid orange;
box-shadow: inset 0 0 0 6px #fff;
}
I have a speaker icon besides my volume slider, and I would like the icon to change when the volume value is at 0, to a second (muted) speaker icon. I've tried different variations which didn't work. How do I do that? Thanks!
var volumeslider;
volumeslider = document.getElementById("volumeslider");
// Add Event Handling
volumeslider.addEventListener("mousemove", setvolume);
// Functions
function setvolume(){
audio.volume = volumeslider.value / 100;
}
input[type=range] {
-webkit-appearance: none;
display: inline-block;
vertical-align: top;
width: 60%;
margin: 10px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #666666;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: #000000;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #666666;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 1px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">
Use JQs attr method to just swap the image source. Also, make sure the src path to the images is relative to the HTML document if you are using an external JS document.
JS:
volumeslider.addEventListener("mousemove", checkMute);
//check for mute each time the slider is dragged.
function checkMute(){
if (audio.volume == 0){
$( ".speaker" ).attr("src", "images/speaker.png");
}else{
$( ".speaker" ).attr("src", "images/speakermute.png");
}
}
This is the desired slider css which works on dekstop.
But only on mobile device (android) it shows like this. I wonder where the textfield like input shows like attached to the slider.
Here's the fiddle http://jsfiddle.net/p5zo31q8/
CSS
/* INPUT RANGE*/
/*chrome*/
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 1px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #fff;
height: 36px;
width: 36px;
border-radius: 50%;
background: #4BDAFF;
margin-top: -14px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
/*firefox*/
input[type=range]{
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 200px;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]:focus::-moz-range-track {
background: #ccc;
}
/*internet*/
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/*scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
margin-top:30px;
margin-bottom:30px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,176,240, 0.8);
background-color:#00B0F0;
}
input[type='range']{
background: #0c0;
height:10px;
}
input[type='range']::-webkit-slider-thumb{
background:#f60;
height:30px;
width:30px;
border-radius: 30px;
}