I want to edit/change a dropdown style with css specially the arrow of the dropdown.
The arrow appear perfect in mozilla firefox but in google chrome it's kind of ugly (he had a bad borders).
How can I get the same result in both of two brwosers (firefox and chrome) without any 1% of difference in this project and any of projects I use ?
This image shows how the button is displayed in firefox :
https://ibb.co/whTPVt3
This image shows how the button is displayed in chrome:
https://ibb.co/35b2Y6D
Html code :
<select class="round">
<option>Search type</option>
<option>Room</option>
<option>Device</option>
<option>Tourist</option>
</select>
CSS code :
select {
/* styling */
background-color: #314669;
border: thin solid #314669;
border-radius: 50px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
color: white;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
/* arrows */
select.round {
background-image:
linear-gradient(45deg, transparent 50%, yellow 50%),
linear-gradient(135deg, yellow 50%, transparent 50%),
radial-gradient(#314669 65%, transparent 72%);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - .5em) .5em;
background-size:
5px 5px,
5px 5px,
1.5em 1.5em;
background-repeat: no-repeat;
}
Inspect the element and make changes on Chrome or Firefox in developer tools, after that write css only for Firefox OR Chrome.
Target Firefox:
#-moz-document url-prefix() {
h1 {
color: green;
}
}
Target Chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.h1 {
color: green;
}
}
Its browser default behavior.
If you want same result in all browser then try use Bootstrap.
Related
Edit : added Codepen
I have a small issue with my css, there us a weird space between border-image and linear background on the top and the left of a button. Could you help me to remove it please? Thank you for your help.
Here is the codepen. The problem is on the button "text". I seems like the problem appears only on certain levels of zoom on Chrome : https://codepen.io/zamehan/pen/ZMXWeg
Here is the associated css, the button has the class .special-button :
.special-button{
background: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) no-repeat ;
color:#616060;
border: 1px solid transparent;
border-image: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) 5 !important;
}
.color-button {
font-family: "Noxa";
flex: 1 100%;
margin: 6px;
font-weight: 700;
letter-spacing: 0.8px;
}
button {
color:white;
border: none;
text-align: center;
text-decoration: none;
padding: 6px 11px;
font-size: 12px;
margin: 4px 5px;
background-position: center;
cursor: pointer;
&[data-color="dark"] {
$color: #616060;
color: $color !important;
&[data-selected="true"] {
color: lighten($color, 10%) !important;
}
}
border: 1px solid transparent;
}
I ran into this problem too, and found the following article:
https://css-tricks.com/the-backgound-clip-property-and-use-cases/
I set the background-clip property of the element with the linear-gradient to "padding-box" and the line/space went away.
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" />
It is possible to add gradient border to a text without SVG in CSS/Sass?
Thanks :)
This is a way to do it, you realize that it works with webkit and that kills the compatibility with browsers that are not modern.
body { padding: 50px; }
h1 {
font: 100px sans-serif;
font-weight: bold;
/* Warning: no fallback */
background: -webkit-linear-gradient(top, red, blue);
-webkit-background-clip: text;
-webkit-text-stroke: 4px transparent;
color: white; /* same as background */
}
<h1>CSS</h1>
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'm trying to write a user style for this page using Stylish in Firefox 27.0.1. The stylesheet I have so far is:
#-moz-document domain("www.hitbox.tv") {
/***** Change stream area colours *****/
.meta, /* title and tabs */
.userContent.cf /* share buttons */
{
background: none !important; /* remove white gradient */
background-color: #000 !important;
color: #AAA !important;
border-bottom: none !important; /* remove white separator */
}
.title, /* stream title */
.hover, /* tabs and buttons below title */
.profile * /* profile text */
{
color: #AAA !important;
}
.btns .active /* currently selected tab */
{
color: #484 !important;
}
button {
background: #000 !important;
color: #AAA !important;
border-top: 2px #AAA solid !important;
border-right: 2px #AAA solid !important;
border-bottom: 2px #888 solid !important;
border-left: 2px #888 solid !important;
}
/***** Push video down the page *****/
.player {
padding-top: 100px !important;
}
/***** Make video occupy all available space *****/
#player {
width: 100% !important;
/* height: 100% !important; */
}
} /* #-moz-document */
The issue is with the very last rule, that should affect the "follow" button below the stream title. (In my case it's a "following" button, but the rule should affect it either way.) None of the styles applied to it are having any effect. However if I comment out any one of the "border" styles, the other s(including "background" and "color") suddenly work. Specifying simply border: 2px #AAA solid !important; also causes the entire rule to be ignored. What's going on here?