Can anyone tell me how to change the selection text background using CSS?
Most new websites show a custom background color rather than the default blue?
here is a tutorial for that :
http://css-tricks.com/overriding-the-default-text-selection-color-with-css/
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
}
Unfortunately, it can't be done in IE.
Related
I have a problem with default option in JQuery combobox.
I need to create small widget in jquery(or something else?) with changing text in dov/span.
I want to:
person who come in our website at start see a first of list option, and he can change this text with option in combobox.
<option value="red" selected>Red</option>
dosent work..
please help..
codepen
try this
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
$(":input#colorselector").trigger('change');
//or
//$('#red').show();
//or
// $("#colorselector").trigger("change");
});
// [forked from](http://jsfiddle.net/FvMYz/)
// [show-hide-based-on-select-option-jquery)(http://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery/2975565#2975565)
/* https://gist.github.com/toddparker/32fc9647ecc56ef2b38a */
/* Some basic page styles */
body {
font: 100%/1.5 AvenirNext-Regular, Corbel, "Lucida Grande", "Trebuchet Ms", sans-serif;
color: #111;
background-color: #fff;
margin: 2em 10%
}
/* Label styles: style as needed */
label {
display:block;
margin: 2em 1em .25em .75em;
font-size: 1.25em;
color:#333;
}
/* Container used for styling the custom select, the buttom class adds the bg gradient, corners, etc. */
.dropdown {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* This is the native select, we're making everything the text invisible so we can see the button styles in the wrapper */
.dropdown select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Magic font size number to prevent iOS text zoom */
font-size:1.25em;
/* General select styles: change as needed */
/* font-weight: bold; */
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
.dropdown select,
label {
font-family: AvenirNextCondensed-DemiBold, Corbel, "Lucida Grande","Trebuchet Ms", sans-serif;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
.dropdown::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
z-index: 2;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpolygon fill='rgb(102,102,102)' points='8,12 0,0 16,0'/%3E%3C/svg%3E") 0 0 no-repeat;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.dropdown select::-ms-expand {
display: none;
}
/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
select:focus::-ms-value {
background: transparent;
color: #222;
}
}
/* Firefox >= 2 -- Older versions of FF (v2 - 6) won't let us hide the native select arrow, so we'll just hide the custom icon and go with native styling */
/* Show only the native arrow */
body:last-child .dropdown::after, x:-moz-any-link {
display: none;
}
/* reduce padding */
body:last-child .dropdown select, x:-moz-any-link {
padding-right: .8em;
}
/* Firefox 7+ -- Will let us hide the arrow, but inconsistently (see FF 30 comment below). We've found the simplest way to hide the native styling in FF is to make the select bigger than its container. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.dropdown::after`, did not undo the previous rule */
/* Set overflow:hidden on the wrapper to clip the native select's arrow, this clips hte outline too so focus styles are less than ideal in FF */
_::-moz-progress-bar, body:last-child .dropdown {
overflow: hidden;
}
/* Show only the custom icon */
_::-moz-progress-bar, body:last-child .dropdown:after {
display: block;
}
_::-moz-progress-bar, body:last-child .dropdown select {
/* increase padding to make room for menu icon */
padding-right: 1.9em;
/* `window` appearance with these text-indent and text-overflow values will hide the arrow FF up to v30 */
-moz-appearance: window;
text-indent: 0.01px;
text-overflow: "";
/* for FF 30+ on Windows 8, we need to make the select a bit longer to hide the native arrow */
width: 110%;
}
/* At first we tried the following rule to hide the native select arrow in Firefox 30+ in Windows 8, but we'd rather simplify the CSS and widen the select for all versions of FF since this is a recurring issue in that browser */
/* #supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
.dropdown select { width:110%; }
} */
/* Firefox 7+ focus style - This works around the issue that -moz-appearance: window kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar, body:last-child .dropdown select:focus {
outline: 2px solid rgba(180,222,250, .7);
}
/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus, .dropdown::after {
display:none;
}
/* Hover style */
.dropdown:hover {
border:1px solid #888;
}
/* Focus style */
select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Firefox focus has odd artifacts around the text, this kills that */
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
option {
font-weight:normal;
}
/* These are just demo button-y styles, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
.output {
margin: 0 auto;
padding: 1em;
}
.colors {
padding: 2em;
color: #fff;
display: none;
}
.red {
background: #c04;
}
.yellow {
color: #000;
background: #f5e000;
}
.blue {
background: #079;
}
footer {
margin: 5em auto 3em;
padding: 2em 2.5%;
text-align: center;
}
a {
color: #c04;
text-decoration: none;
}
a:hover {
color: #903;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<label class="wrapper" for="states">This label is stacked above the select</label>
<div class="button dropdown">
<select id="colorselector">
<option value="red" selected>Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="output">
<div id="red" class="colors red"> “Good artists copy, great artists steal” Pablo Picasso</div>
<div id="yellow" class="colors yellow"> “Art is the lie that enables us to realize the truth” Pablo Picasso</div>
<div id="blue" class="colors blue"> “If I don't have red, I use blue” Pablo Picasso</div>
</div>
<footer>
<small>
Javascript
by stackoverflow-user113716
· CSS
by Todd Parker</small>
</footer>
I have a progress bar and i want to style it away from default.
I tried bit of things but it didn't work as I expected.
I want to change the background color and border radius of the progress bar.
When I set the background color, it changes from the default blue to green color and not to the color I set.
<progress class="amount-progress" value="60500" max="120000">70 %</progress>
You can see the fiddle.
When i set the background-color the color changes from blue to green which has to change to a different blue.
And i want the progress bar to have a smooth edge.
I did set border-radius but this also didn't work out.
.amount-progress {
width: 80%;
margin-left: -11.5%;
height: 22px;
background-color: #0091EA;
}
You have to work with the kit of HTML5 progress bar.These are currently the entire selectors for styling HTML5 progress bar:
progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
}
progress::-moz-progress-bar {
/* style rules */
}
so :
progress {
border-radius: 7px;
width: 80%;
height: 22px;
margin-left: -11.5%;
box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
background-color: yellow;
border-radius: 7px;
}
progress::-webkit-progress-value {
background-color: blue;
border-radius: 7px;
box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
/* style rules */
}
<progress value="3333" max="10000">33%</progress>
One thing to keep in mind is that there are two types of progress bars: indeterminate and determinate. If you use the above you will be changing the style for both. If you only want to change the style for a determinate bar you can do the below. This is useful if you want to style the indeterminate progress bar different, for example with a rounded spinner or anything like that.
progress {
display: block;
}
/* Determinate: */
progress[value] {
/* style rules */
}
progress[value]::-webkit-progress-bar {
/* style rules */
}
progress[value]::-webkit-progress-value {
/* style rules */
}
progress[value]::-moz-progress-bar {
/* style rules */
}
/* Indeterminate: */
progress:not([value]) {
/* style rules */
}
progress:not([value])::-webkit-progress-bar {
/* style rules */
}
progress:not([value])::-webkit-progress-value {
/* style rules */
}
progress:not([value])::-moz-progress-bar {
/* style rules */
}
<p>Determinate:</p>
<progress value="66" max="100">Determinate</progress>
<p>Indeterminate:</p>
<progress>Indeterminate</progress>
Hello I would like to ask a question regarding css style.
I put the same color value in the placeholder text and also in a select dropdown. But the color that the browser shows differs.
Anyone can explain why this happens?
Here is an example:
http://scratchpad.io/abounding-coat-5186
edit: What I want to achieve is exactly the same text-color. I dont want that opacity effect that the placeholder has.
You can rewrite placeholder styles with this pseudo-classes/pseudo-elements
input::-webkit-input-placeholder { /* Chrome/Opera/Safari/ */
color: red;
opacity: 1;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
opacity: 1;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
opacity: 1;
}
input:-ms-input-placeholder { /* IE */
color: red;
opacity: 1;
}
JSfiddle here
I think you want to change placeholder. here how to change placeholder color
::-webkit-input-placeholder {
color: red;
}
Read More
I want to style the "ending" of the current progress of the HTML5 progress bar by adding small black dot to it, see the screen. So this dot must move as progress moves
But the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the codepen
Maybe someone knows what happened or how to achieve my goal?
Thanks a lot!
P.S. Here is the HTML/CSS I use
HTML:
<progress value="1400" max="4261"></progress>
CSS
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress[value]::-webkit-progress-value {
position: relative;
background: #00d38d;
}
progress[value]::-webkit-progress-value::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 15px;
border-radius: 50px;
background: black;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #00D38D;
}
progress::-moz-progress-bar {
background-color: #00D38D;
}
You don't need a pseudo element to get this effect. Here it is using a gradient on the main style. (Tested only in Chrome)
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress::-webkit-progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
progress::progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
<progress value="1400" max="4261"></progress>
I read here that the pseudo css appears not to work with the progress element:
I wish that I could have used :after (or ::after) rules instead, but
these pseudo-elements don’t work with the progress tags in any browser
that doesn’t use the polyfill. And no, :before doesn’t work either. I
have no idea why it doesn’t work, but it’s a shame — using them would
be perfect to get rid of the extra markup.
Found here: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
I'm not sure why it was working before, I haven't been able to find a non JS way to emulate the effect of using the ::after css.
Here's a codepen from that article you referenced where it's not working as well.
They appear to be using the same method as you and it has no function:
progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo
elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;
background-color: white;
border-radius: 100%;
}
You may have to implement some sort of javascript or use a different method other than the HTML5 progress element to implement this.
Numbars has some similar stuff to what you're trying to do, but you may need to modify it a decent amount to get it functioning the way you want.
Sorry this isn't exactly a solution, but hopefully you can find a workaround that's not too tough to create.
Currently I am implementing a mobile version of a website.
On iOS 7.1 safari or UIWebView, it show
However my expected output is (also correct on android browser)
you could see that the upper part of the textbox has a inner shadow on iOS.
What I did is set the box-shadow to none. However, the shadow is still exist.
Anyone has ideas on this issue?
here is the CSS code
input, textarea {
box-shadow: none;
background-color: transparent;
border: 1px solid #EEE;
}
To remove the inner shadow from the input field add -webkit-appearance: none; and it will remove the inner shadow from the input field. This DEMO has been tested on safari iOS7 .
input[type="text"], textarea {
display:block;
-webkit-appearance: none; /*this property remove the inner shadow*/
border-radius:1px;
background-color: white;
height:24px;
}
Update
Although using -webkit-appearance: none; and -webkit-appearance: caret; have own problem, so another method is to use a transparent background image. or use gradient. Another Example using Gradient. DEMO is here.
input[type="text"], textarea
{
background-color: white;
height:24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);/*remove the grey highlight appears once touching an element.*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
/*Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
}
try this
input, textarea {
box-shadow: none !important;
background-color: transparent;
border: 1px solid #EEE;
}