I hate it when I'm browsing and end up selecting text or elements on a webpage by accident; everything turns blue! So for the moment, I'm using this class on the parts of the page where the user could mistakenly select things:
.NoSelect{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;}
This works fine but the problem is that I end up with lots of divs that have this class.
Is there a way to change the color of selected text and selected elements and make it transparent?
Thanks.
You can use the ::selection CSS attribute.
for everything:
::selection { background: transparent; }
or just p tags, for example:
p::selection { background: transparent; }
Here's an example.
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
I'm trying to style a <select> elements background-color on :hover and at the same time leave the styling of the <option> dropdown untouched. It seems to me that this issue occurs only in Firefox and not in Chrome/Safari.
Chrome select with background color
Firefox select with background color
This would be the code snippet. Please notice that I don't want to have the dropdown to be affected by the background-color in Firefox. Also: Not only the background color changes. Also the borders change. The whole "native" look gets lost as soon as I give the select a background-color.
select {
background-color: red;
}
<select><option>Option</option></select>
Thanks in advance.
Why not to try to set the properties of the options in select too, something like:
select option{
background-color: blue;
}
I think I've found a proper workaround.
We need to apply the hover color to a parent div and use :focus-within.
div:focus-within {
background: red;
}
select {
background: transparent;
border: 0;
}
<div><select><option>Option</option></select></div>
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
When I mouse over linked images I see hover background color beneath the image. How to avoid this?
Is there any solution that would not involve applying special class to a elements (like a.nobackground:hover)?
CSS:
a:hover, a:focus {
background-color: rgb(240,39,96);
cursor: pointer;
}
HTML:
<img src="with_transparency.png" alt=""/>
edit:
setting img background to none doesn't work
a img {
background: none !important;
}
setting img background to any other color would do the job if there's no non-solid color (or graphic) beneath the image (in this case .png)
a img {
background: #000 !important;
}
Does setting the background color of the images do what you want?
a img {
background: none;
}
Depending on your stylesheets, you might need the !important bang in front of "none" to overwrite other conditions.
Edit: On second thought, you might want to explicitly set a color value instead of simply saying "none."
Another edit: True, if the color or background behind the transparent PNG wasn't a solid color, you'll encounter some issues. One alternative is this:
And the CSS:
.transparent_png {
background-image: url('with_transparency.png');
background-color: transparent;
display: inline-block;
width: ??px;
height: ??px;
}
So here, you're not actually using an image tag, but can overwrite the background-color property that's normally applied on a:hover and a:active. Does this work?
If I understood the question correctly... You will need to either apply a special class to that specific link, or call the link by its location if it´s different from others. For example:
div div div a {}
And as Matt said you might need to use !important because you have a rule that includes all the links in the page. I´d recommend a different class, it´s better from a semantic´s point of view.
Is it possible to have a style for the html select box when it's just sitting there, and then a different color when the user has clicked on it and the items are listed?
I want something like this:
select {
background:#fff;
color:#929496;
font-size:14px;
}
Then the colors are inverted, so the text is white and the background is grey?
Use the :focus pseudo-class:
select:focus {
color: #fff;
background-color: #929496;
}
This also applies the inverted colors to its options when they appear.
jsFiddle preview
SELECT boxes are OS-level controls, not HTML controls. You cannot reliably style them across browsers. You can replace them with various HTML+CSS-based techniques.
<style>
::-moz-selection {
color:white;
background:#3A75AF ;
}
::selection {
color:white;
background:#3A75AF ;
}
</style>
Will do your job :) Works everywhere. Please dont ask about IE.