I am trying to write a selector like this, but to no success:
.something::after::selection
Basically I am already using ::after to inject some content, namely an image. But I want to prevent the user from being able to "select" this image and get an ugly blue back-shadow.
Normally I can prevent this with the following:
.something::selection
{
background-color: transparent;
}
But it does not seem to combine well with ::after.
Has anyone tried this before or have a solution?
No, in firefox I'm 100% sure that you can't change that effect on selected images, is system-specific, and not customizable yet
*edited
To prevent images to be selected you can use following css:
img {
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Also see the updated jsfiddle.
With ::after see this jsfiddle.
Related
I'm making my firs steps learning to code. I've been taken some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.
The thing is that I made a summary. And when it's active it has a blue border.
I'm trying to remove it but I can't find a solution.
I tried suing this without success:
summary:active {
border:none;
}
Do you have some suggestion?
summary:focus{
outline: none;
}
The browser is rendering a border around the summary while it is on focus.
Problem: Its not the border but a outline that browsers render.
Solution: Set outline:none on the element.
So the code would be
summary:focus{
outline: none;
}
To remove it from all inputs
input {
outline: none;
}
To remove it from all tags use the universal selector *:
*:focus {
outline: none;
}
The problem is the input field, not the summary class itself. You can try removing it by using the following code:
input:focus{
outline:none;
}
Hope it helps
People have said to remove with outline: none, which will remove the outline.
However, from an accessibility perspective you should replace the outline with one that fits the brand guidelines.
The outline on an element's focus state is to ensure that someone can tell where they are. Not all users have a point-and-click device, and even if they do, they won't leave their mouse hovering over an element at all times. For field inputs it's worth keeping an outline or other focus style so users know which field they're in.
The A11y Project (accessibility project) has some useful information which covers what I've said.
I'd suggest that rather than doing:
summary:focus {
outline: none !important
}
You talk to the designer to come up a positive focus style, e.g.:
summary:focus {
background: #ffeeee;
color: #242424;
outline: none
}
If it is an input field try this
input:focus{
outline: none !important;
}
I was able to make the blue outline disappear in Safari 10 with:
summary {outline:none;}
Funny thing is that I can't change the specific color of the outline:
summary:focus{outline:red;}
Αlso removed the outline. Using solid and dotted all work as specified, and display it black.
But it looks like the blue color is hard-coded into focused input fields. The very text box I'm using right now has the same light blue outline. Maybe that can't be changed, but you can suppress its visibility or restyle it. You just can't specify a color.
*.no-outline > * :focus {
outline: none;
}
This would remove any the outline for any tag with class no-outline, and also it will remove outline for all its children.
On a page I am having a webkit scrollbar which has been hidden using display: none css property.
#element::-webkit-scrollbar {
display: none;
}
In one of my app level css files I tried to override the above css rule, but I wasn't able to display the scrollbar
I tried changing the css but I couldn't the get exact scrollbar which would have been there if display: none property was not present.
#element::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
display: block;
}
#element::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
The above css made the scroll bar visible but it gave me ugly scroll bar (probably due the css rules I have used).
Is there a simple way in which I can display the webkit scrollbar which would been there if the display:none property was not present.
I can not change the display:none as it is being inherited by my app.
I can only over-ride that rule.
EDIT:
An exactly similar question was asked How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again, but it seems that also doesn't have an accepted answer.
Edit: Does not seem to work, as pointed out in the comments.
I was able to restore the scrollbars using
#element::-webkit-scrollbar {
display: unset;
}
If the display:none is what it's hiding it why don't you just overwrite the display instead of adding that other properties?
Try overwriting the display with the different values it can has:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
you can do something like this
*:not(.excluded-element)::-webkit-scrollbar { display: none; }
reads as: apply it to everything except the .excluded-element
How can i avoid selecting a div and hide the highlight when i click in it?
I want to hide the dotted outline:
(can't get the screenshot to appear, here it is: http://i.stack.imgur.com/3OKaP.png)
it can be done with a css class .
like .if this is your div :
<div class='disableSelection'>text</div>
then apply this css .
<style>
.disableSelection{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}
</style>
Useoutline:none or outline:0
Check the similar one here
this worked in my case:
element {
-webkit-tap-highlight-color: transparent;
}
as per
Mozilla Docs
Add outline:0; to your div.
I usually see this problem on IE more than other browsers.
Ref here for more info:
Not sure if this is what you're looking for, but check Chris Coyers article (Removing The Dotted Outline) on this
But think about the usability issues if you don't set an alternative active state at all. But I guess Chris is mentioning this anyway.
*:focus{outline:none}
please add this code in your css file. This is css issue
Very important to add "a", to say you are adding it for a link:
<style>
.disableSelection a {
outline: 0;
}
</style>
Here an example text
Label: Some-text-here
How can i have it so when i triple click the line it tries to highlight only is Some-text-here rather then the full line? I could swear i seen it done before with css i just cant think of a way
<span style="float:left">Label</span><span style="float:left">Some-text-here</span>
JsFiddle.
If you use floats to position the texts next to each other they'll still be considered separate paragraphs and achieve the desired result.
<html>
<body>
<div style="float:left">Label:</div>
<div style="float:left">some text here</div>
</body>
</html>
This is somewhat of an extension to AXO's answer, but the perfect CSS rule would be user-select: contain;, which will prevent selections from crossing the element boundary. This value, however, is only supported in IE/Edge.
An interesting property though of user-select: all; and user-select: none; is that all will highlight the entire element with a single click, and all can be put inside none, creating a similar effect to contain if you put user-select: all; on the desired element within a parent element with user-select: none;. This is especially useful if you also have bare text in between the elements which you want to prevent being selected, but note that with this solution, the selection can still expand beyond the parent element, skipping over it, so it's not truly containing the selection.
Example:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.selectall {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
}
<p class="unselectable">Some extra text: <span class="selectall">ID-12345_678</span></p>
In some situations it may also be appropriate to exempt some parts of text from selection. The experimental user-select style can be used for that purpose, like so:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<span class='unselectable'>Label: </span>some text here
The simplest and most compatible approach that responds to single, double and triple clicks as expected is on the snippet below. See more here: user-select - CSS: Cascading Style Sheets | MDN
<span style="user-select: none">Label: </span><span style="user-select: text">Some-text-here</span>
Is it possible to remove the borders around a checkbox so that it appears invisible? I have it placed in a DIV with a color background.
As this is the first result for me when searching for "remove checkbox border" in Google, let me mention that checkbox default styling could be removed in all browsers except IE with the appearance property:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Unfortunately, its not possible to remove borders on browser native checkboxes (it will not work in all browsers), You will have to write your own checkbox-like state widget to implement this. Check out Nice forms if you want to style your regular form controls with custom styling
For FireFox: try border:none.
For IE try: style="background:transparent;border:0"
The other solution is to create your own images for checked and unchecked displaying the appropriate onclick of the image.
I know this is a late answer, but a CSS expert I work with gave me this way to get rid of the border around a checkbox (and probably radio button) in IE10:
Set the border color to the same color as the page's background.
Apply a box-shadow of "none" to it.
That's it. Worked like a charm!
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
In CSS this is possible by setting the web kit appearance to none. Something like this
-webkit-appearance: none;
You would have to use some widget or a custom ui of some sort to remove the borders.
I'm not sure if this works: <input type="checkbox" style="border: 0;" />