I am trying to create a line inside the thumb of a <input> with type range.
I have managed to modify some of the styling of the thumb using the ::-webkit-slider-thumb pseduo-element selector, as shown below, but I need a vertical line centered in the thumb of the slider. Is there a way to create such a line?
input[type="range"]{
-webkit-appearance:none !important;
width: 344px;
height: 18px;
/*background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 75%,#f6f6f6 75%,#f6f6f6 100%);*/
/*-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));*/
border-radius: 18px;
margin: auto;
transition: all 0.3s ease;
background: rgb(190,220,0);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
/*background-color: blue;*/
border: 1px solid #c0c0c0;
width: 34px;
height: 34px;
border-radius: 18px;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%, );
-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));
z-index: 1;
/*background: white url(../icons/gc4_icon_cssbutton-v.svg) no-repeat;*/
}
<input type="range" id="test" />
In some old versions of Chrome only (but not in most browsers), you can do this using ::after or ::before pseudo-elements:
input[type="range"]::-webkit-slider-thumb{
position:relative;
display:block;
}
input[type="range"]::-webkit-slider-thumb::after{
content:'';
position:absolute;
top:0;
height:100%;
left:50%;
width:1px;
background:#000;
}
DEMO
However, from Chrome 49 onwards, this no longer works; allowing pseudo-elements to be chained in a CSS selector (like foo::-webkit-slider-thumb::after) was a violation of the CSS spec, and Chrome has changed its behaviour to conform to the spec. This also never worked in Firefox, Internet Explorer, or Edge.
Related
Hi i've got a input range on html5 min 0 and max 100.
But i would like to color a part for example between 70 and 100.
I don't want to use bootstrap for this.
I don't know how to do that.
You can easily do this by using a linear-gradient as background for the track. All that we need to do is create a gradient which is colored only for the width that we need (30% for your case because you need it colored only between 70-100) and then position it with respect to the track's (the track is the bar of the range input) right side. Since the styling of range inputs is still in experimental phase we have to use browser prefixed selectors (to select the track of each browser) and then apply styles to it. We also have to do some additional corrections to address browser specific problems, I've marked these with inline comments in the code.
The below code is tested and found to be working fine in Edge, IE11 and latest versions of Chrome, Firefox and Opera (all on a Windows 10 machine).
Note: This will only color the part between 70-100 of the range input differently. This doesn't have the code to make the appearance of range input the same in all browsers. I've not done that because that is out of the scope of this question.
Also, as mentioned by ssc-hrep3 in his comment, this may not be good for production implementation because these things are still in experimental stage and we've to use browser specific selectors but if you want to apply custom styling to HTML5 range inputs then there is probably no other way.
input[type=range] {
-webkit-appearance: none;
border: 1px solid black; /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border: none; /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
<input type="range" min="0" max="100" value="70" step="10" />
For the benefit of future readers: Just in case you need uniform styling across all major browsers then you could use the below snippet. It produces almost similar output in all of them.
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
height: 10px;
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border-color: transparent;
border-style: solid;
border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
margin-top: -4px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
margin-top: 0px; /* nullify default margin */
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
<input type="range" min="0" max="100" value="70" step="10" />
I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is.
I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML on the page.
Example below.
You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent.
Here is a working example
Suppose you have below as you html,
<div class="btn">
<button><div class="btn-text">Click</div></button>
</div>
If we skew the parent element by 20deg then we should skew the child element by -20deg as,
.btn {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
.btn-text {
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg);
padding: 20px;
}
You can simply accompish desired effect using CSS triangle tricks.
Just add some styles for the ::before and :: after pseudo-classes.
.skewed_button {
background: #32CD32;
color: #000;
text-decoration: none;
font-size: 20px;
display: inline-block;
height: 30px;
margin-left: 15px;
padding: 6px 10px 0;
}
.skewed_button::before {
content: "";
float: left;
margin: -6px 0 0 -25px;
border-left: 15px solid transparent;
border-bottom: 36px solid #32CD32;
height: 0px;
}
.skewed_button::after {
content: "";
float: right;
margin: -6px -25px 0 0 ;
border-left: 15px solid #32CD32;
border-bottom: 36px solid transparent;
height: 0px;
}
Some Text
You can also use clip-path for this, eg:
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
.skewed_button {
background: yellow;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
}
Some Text
One solution is to use css triangles on :before and :after. This solution leaves the cleanest HTML.
This jsfiddle demonstrates
.is-skewed {
width: 80px;
height: 40px;
background-color: #f07;
display: block;
color: #fff;
margin-left: 40px;
}
.is-skewed:before,
.is-skewed:after {
content: '';
width: 0;
height: 0;
}
.is-skewed:before {
border-bottom: 40px solid #f07;
border-left: 20px solid transparent;
float:left;
margin-left: -20px;
}
.is-skewed:after {
border-top: 40px solid #f07;
border-right: 20px solid transparent;
float:right;
margin-right: -20px;
}
CSS triangles use thick borders on elements with 0 dimensions with the points at which the borders meet providing the diagonal line required for a triangle (a good visualisation is to look at the corner of a picture frame, where the two borders meet and create triangles). It's important that one border is transparent and one coloured and that they are adjacent (i.e. left and top, not left and right). You can adjust the size, orientation and the lengths of the sides by playing with the border sizes.
For your button, we also use floats and negative margins to pull them outside of the element and line them up right. Position absolute and negative left and right values would also be a good solution to positioning
You can also do :hover states
.is-skewed:hover {
background-color: #40f;
}
.is-skewed:hover:after {
border-top-color: #40f;
}
.is-skewed:hover:before {
border-bottom-color: #40f;
}
It's important to note the use of background-color and border-color and also that the :hover comes first in all the relevant selectors. If the hover came second this would happen
I have a css style something like:
.button {background:#e9e9e9 url('/image.png') no-repeat 9px 12px;}
.button:hover {background:#e9e9e9 url('/bold-image.png') no-repeat 9px 12px;}
Is there a way to skip above :hover part and make the image.png "bolder" (a bold effect of the original image)? (without having to create an image for it)
Actually it is not possible to alter the content of images by CSS. However in this particular case, we can fake the bold effect of the contents by using drop-shadow filter (assuming the image is transparent and there is no background color attached!):
.button {
background: url('/image.png') no-repeat 9px 12px;
}
.button:hover {
background: url('/image.png') no-repeat 9px 12px;
-webkit-filter: drop-shadow(0 0 8px black); /* webkit only
assuming the content is written in black */
filter: drop-shadow(0 0 8px black); /* FF~35 */
filter: drop-shadow(0 0 0 8px black); /* MDN */
}
As can be seen, the browser support is limited to Webkit-based web browsers and Firefox 35+ as of writing.
Here is an online example:
.button-container {
display: inline-block;
background-color: #e9e9e9;
}
.button {
width: 488px;
height: 198px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: url('http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png') no-repeat 9px 12px;
}
.button:hover {
background: url('http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png') no-repeat 9px 12px;
-webkit-filter: drop-shadow(0 0 5px black); /* webkit only
assuming the content is written in black */
filter: drop-shadow(0 0 5px black); /* FF~35 */
filter: drop-shadow(0 0 0 5px black); /* MDN */
}
<div class="button-container">
<button class="button"></button>
</div>
Webkit-based web browsers and also Firefox 35 don't seem to support the syntax stated by Mozilla Developer Network, however let's leave it at there for upcoming web browsers.
Do you want something like zoom effect?
Try
img:hover {zoom:120%;}
The background-size property will let you scale the image in just one direction, which may or may not look ugly, but from your snippet, I'm not sure if you're using a sprite there, where there might be more number-fiddling involved than it's worth. Browser support is de facto universal.
.button {
background-image: url('http://dummyimage.com/400x200/000/fff&text=Send');
background-size: 100% 100%;
background-position: center center;
}
.button:hover {
background-size: 105% 100%;
}
<a style="display:inline-block;width:400px;height:200px;" class="button">...</a>
I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.
Supposed HTML Tag:
<span class="tag tag-gray">FRETE GRÁTIS</span>
See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/
Thank's
Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
To get it to work with older (and other) browsers, you may want to add the prefixed versions of border-radius
To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of transform and transform-origin
The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
Due to using border-radius, you cannot set div.cut's overflow to hidden as the div's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)
a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)
Is this fiddle something similar to what you need?
Here is the code for it
`.tag.tag-gray {
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 300px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 300px;
border-radius: 5px;
border-top-right-radius: 300px;
}`
Try this:
<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>
CSS:
.tri {
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #ffffff;
position:absolute;
top:0px;
right:0px;
}
.rounded {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 6px 20px;
background: -moz-linear-gradient(
top,
#c0c0c0 0%,
#333333);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c0c0c0),
to(#333333));
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px solid #000000;
width:120px;
position:relative;
}
And for IE8, I'd use CSS3 PIE
If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:
.tag-grey {
background: grey url(triangle.png) no-repeat right top;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.
I'm having a problem with rounded borders and a gradient in IE9. The gradient overflows the rounded border.
.cn_item:hover, .selected{
width:300px;
border:1px solid #333333;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#333333;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background-image: -ms-linear-gradient(top, #DDDDDD 25%, #FF0000 5%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666')";
zoom: 1;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
I already use the overflow:hidden; but nothing works. Any suggestions?
This is a known bug. If you search stackoverflow there are some questions just like this one.
IE9 border-radius and background gradient bleeding
The only way around it without adding more markup is to use svg.
Colorzilla gradient editor should make it easy.
Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. No need for SVG, PIE, JS, or conditional comments.
<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>
.ie9roundedgradient {
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.roundedgradient {
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
/* use colorzilla to generate your cross-browser gradients */
}