I have created a custom toggle with checkbox and its is working fine in chrome but not working in IE 11. How to fix that issue ?
this is my css I have checked in IE ,is that Webkit appearance not supported?
body{
text-align: center;
}
input[type="checkbox"]{
position: relative;
width: 60px;
height: 30px;
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
background:#d6d6d6;
border-radius: 20px;
outline:none;
}
input[type="checkbox"]::-ms-expand{
display: none;
}
input:checked[type='checkbox']{
background:#0196fe;
}
input[type="checkbox"]:before{
content: '';
position:absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: white;
border: 2px solid #000000;
left: 0;
top:-1px;
}
input:checked[type="checkbox"]:before{
left: 30px;
border: 2px solid #5dc8f1;
}
<Input type="checkbox" name="checkbox" />
Replace
input[type="checkbox"]::-ms-expand {
display: none;
}
with
input[type="checkbox"]::-ms-check {
visibility: hidden;
/* or */
opacity: 0;
}
-ms-expand is for select elements whereas -ms-check targets checkboxes and radiobuttons.
Related
This question already has answers here:
How to style HTML5 range input to have different color before and after slider?
(13 answers)
Closed 2 years ago.
I'm kinda struggling at styling this element. I've never done it before and I can't really find solution to my problem.
I just want to add border-radius to edges, add some box-shadow to that dot ,which is dragable and main reason why I'm asking is ,how to add that lower opacity to side which is not selected yet.
I don't know if it has to be done by Javascript ,or I can simply do it with css but my problem is :
This is how my range looks now
My goal is this
Since I've never styled this element before ,all of this css is from multiple articles ,which I've found on Google. Is there anything for this like background:active and background:unactive ?
Thanks.
.container{
background-color:red;
width:30%;
padding:1em;
text-align:center;
}
input[type="range"]{
width: 100%;
}
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: .35em;
background: white;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
background: white;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
<div class="container">
<div className="range">
<p className="heading">HEIGHT</p>
<input type="range"></input>
<p className="heading">WEIGHT</p>
<input type="range"></input>
</div>
</div>
please try this..
And give transitions in css for more attractive
function rangeValFunc(rangeVal){
var rangeWidth = document.getElementById("tooltiptext").textContent = rangeVal+"cm";
document.getElementById("tooltiptext").style.left = "calc("+rangeVal+"% - 50px)";
}
.container {
background:#eb6c5b;
padding:20px;
}
input[type="range"]{
-webkit-appearance: none;
width: 100%;
height: 8px;
outline: none !important;
appearance:none;
border:none;
border-radius:30px;
}
input[type="range"]::-moz-focus-outer {
border: 0;
}
input[type="range"]:hover {
outline:none;
}
/* Chrome */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 9px;
height: 9px;
background: #4CAF50;
cursor: pointer;
border-radius:30px;
outline:none;
}
/* Moz */
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: #f1f9f4;
cursor: pointer;
border-radius:50%;
border:none;
outline:none;
}
input[type="range"]::-moz-range-progress {
background-color: #fff;
height: 100%;
border-radius:30px;
border:none;
}
input[type="range"]::-moz-range-track {
background-color: #ccc;
border-radius:30px;
border:none;
height: 100%;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #fff;
height: 100%;
border-radius:30px;
border:none;
}
input[type="range"]::-ms-fill-upper {
background-color: #ccc;
border-radius:30px;
border:none;
height: 100%;
}
/* tooltip style */
.tooltip {
position:relative;
padding:30px 0;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 100px;
background-color: #f38080;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top:-5px;
left:calc(50% - 50px);
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #f38080 transparent transparent transparent;
}
<div class="container">
<div class="tooltip">
<span class="tooltiptext" id="tooltiptext">50cm</span>
<input type="range" min="0" max="100" value="50" class="slider" id="myRange" onchange="rangeValFunc(this.value);">
</div>
</div>
I have a piece of html code using the select tag. I need to override the default dropdown icon with a new segoe icon. I did that using the following code:
.select {
border: 1px solid #ccc;
overflow: hidden;
height: 40px;
width: 240px;
position: relative;
display: block;
}
select {
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select:after {
content: "\e0e5";
font-family: segoe mdl2 assets;
color: #000;
padding: 12px 8px;
position: absolute;
right: 0;
top: 0;
background: red;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
box-sizing: border-box;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<label class="select">
<select name="email" id="email">
<option>aaaa1</option>
<option>aaaa2</option>
<option>aaaa3</option>
<option>aaaa4</option>
<option>aaaa5</option>
<option>aaaa6</option>
</select>
</label>
My problem is, when clicking on the new dropdown icon, the dropdown list doesn't populate. As it is like an icon over the select option tag. I tried to use z-index but it moves the icon completely to back. Can someone provide a solution?
I found the solution. By adding a CSS property
.select:after {
pointer-events: none;
}
in addition to all the CSS properties above, it works.
Changes Some css
select{
height: 40px;
padding: 5px;
border: 0;
font-size: 16px;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index:1; /*Add Z-index*/
position:relative; /*Add Position*/
background:transparent; /*Add Background*/
}
.select:after {
content:"\e0e5";
font-family: segoe mdl2 assets;
color: #000;
padding: 12px 8px;
position: absolute;
right: 0;
top: 0;
background: red;
/*z-index:1;*/ /*Remove Z-index */
text-align: center;
width: 10%;
height: 100%;
box-sizing: border-box;
}
https://jsfiddle.net/yqmb3wxL/
I have a range slider on my web which is working fine on all browser other than IE. I am using background image for thumb but that image is not showing on IE and also i am using pseudo element to show starting and ending point, which is also not visible on IE. Here is my code
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
input.range-slider__range {
-webkit-appearance: none;
max-width:100%;
height: 2px;
border:1px solid #06C3C3 !important;
outline: none;
padding: 0;
margin: 50px 0;}
input.range-slider__range:before {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: -2px;
border-radius: 50%;
background: #06C3C3;}
input.range-slider__range:after {
content: '';
width: 7px;
height: 7px;
position: relative;
display: block;
top: -3px;
left: 2px;
border-radius: 50%;
background: #06C3C3;}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
.range-slider__range::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background: url("https://dummyimage.com/40/000/fff.jpg");
width: 186px;
height: 49px;
background-repeat: no-repeat;
cursor: pointer;}
You use :-webkit-slider-thumb and ::-moz-range-thumb which, by their name, are properties for webkit browsers like chrome/safari etc. and moz which is for mozilla firefox .
So of course it won't appear on IE. For IE you can use ::-ms-thumb together with ms-track
:after,:before are pseudo-elements that are used to insert content after of the before the content of an element. input elements do not have content. ( just like img or hr etc. ). So the behavior in IE, to NOT display :after or :before on a 'non-content' HTML element.
, is the correct one.
You can wrap your input inside a label and add pseudo-elements to it.
Example below ( for IE )
input[type=range]::-ms-track {
width: 300px;
height: 5px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
label {
position: Relative;
}
label:after,
label:before {
content: '';
width: 7px;
height: 7px;
position: absolute;
display: block;
top: 0;
border-radius: 50%;
background: #06C3C3;
}
label:before {
left: 2px;
}
label:after {
right: 2px;
}
<label>
<input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">
</label>
Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.
What I have right now:
I need to make them bigger like this:
you can wrap a input in and element and style it
div {
display: inline-block;
position: Relative;
border: 2px solid grey;
border-radius: 10px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div:before,
div:after {
background: white;
right: 0px;
width: 30px;
height: 20%;
position: absolute;
pointer-events: none;
}
div:before {
content: '';
bottom: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
background-position: center;
}
div:after {
content: '';
top: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
transform: rotate(180deg);
background-position: center;
}
input {
height: 80PX;
font-size: 50px;
outline: 0;
border: 0;
}
<div>
<input type="number" value="10" />
</div>
well, to achieve that you have to play with pseudo elements and some CSS3 tricks.
to create triangle https://css-tricks.com/snippets/css/css-triangle/
to manipulate input number spinners
input[type=number]::-webkit-inner-spin-button {
/* your code*/
}
here is the example.
input {
color: #777;
width: 2em;
font-size: 2em;
border-radius: 10px;
border: 2px solid #ccc;
padding: 5px;
padding-left: 10px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor: pointer;
display: block;
width: 10px;
text-align: center;
position: relative;
background: transparent;
}
input[type=number]::-webkit-inner-spin-button::before,
input[type=number]::-webkit-inner-spin-button::after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #777;
}
input[type=number]::-webkit-inner-spin-button::before {
top: 7px;
}
input[type=number]::-webkit-inner-spin-button::after {
bottom: 7px;
transform: rotate(180deg);
}
<input type="number" value="1">
Another solution, offering uniformity between browsers and more customisation options, would be to use the JQuery UI spinner element.
On opera, i can do the following
<style>
#range{
width: 20px;
heigth: 300px;
}
</style>
<input type="range" id="range" />
and it will render a vertical slider. However, this doesn't seem to work on chrome. Is there a way I can do this? (I'm not looking for any jQuery sliders or anything)
It seems Chromium does not yet implement support for this yet:
See: http://www.chromium.org/developers/web-platform-status/forms
Not available yet
Localization of
Dedicated UIs for color, date, datetime, datetime-local, month, time,
and week types
Automatic switching to vertical range
Value sanitization algorithms
datalist element, list attribute, and list/selectedOption properties
Edit: Vuurwerk indicated that it is actually possible to alter the presentation using the -webkit-appearance: slider-vertical property. Although this does transform it into a vertical slider, I would not recommend doing this, since it will break your layout and doesn't look really pretty: example.
If you really want a vertical slider, use a JavaScript solution. Support for <input type="range" /> is very basic at the moment anyway, so you are probably better off with a graceful degradation or progressive enhancement approach.
-webkit-appearance: slider-vertical;
Maybe with a css transform ?
-webkit-transform: rotate(90);
Another solution could be to use the slider module from jQuery UI.
http://jqueryui.com/demos/slider/#slider-vertical
input[type='range']{
width:20px;
height:140px;
border:2px solid blue;
display:block;
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
z-index: 0;
}
As Aron has said there is no support for webkit browser.
However this is what i could do for achieving the output.
body {
margin: 50px;
}
.opacitySlider {
position: relative;
transform: rotate(90deg);
width: 125px;
height: 20px;
}
.opacitySlider:before {
content: " ";
left: 10px;
top: 1px;
position: absolute;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 115px solid #ccc;
}
.opacitySlider input[type=range] {
outline: none;
-webkit-appearance: none;
height: 20px;
padding: 0;
width: 125px;
background: transparent;
position: relative;
margin: 0;
cursor: pointer;
}
.opacitySlider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #69a80e;
height: 20px;
width: 20px;
border: 1px solid #fff;
border-radius: 50%;
}
.opacitySlider input[type=range]::-moz-range-track {
border: none;
background-color: transparent;
}
.opacitySlider input[type=range]::-moz-range-thumb {
background: #69a80e;
height: 20px;
width: 20px;
border: 1px solid #fff;
border-radius: 50%;
}
.opacitySlider input[type=range]::-ms-fill-lower, .opacitySlider input[type=range]::-ms-fill-upper {
background: transparent;
}
.opacitySlider input[type=range]::-ms-track {
height: 18px;
border: none;
background-color: transparent;
margin: 0;
}
.opacitySlider input[type=range]::-ms-thumb {
background: #69a80e;
height: 20px;
width: 20px;
border: 1px solid #fff;
border-radius: 50%;
height: 17px;
width: 17px;
}
<div class="opacitySlider">
<input step="any" type="range">
</div>