I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/
Related
I am using :before pseudo-elements bound to particular classes to add symbols in front of p tags, with CSS like this:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
}
I am using this in a Wordpress theme where the user can select that class for a p tag in the editor, in order to to put that symbol to the left of the current paragraph.
However, the website should be accessible, and the screenreader (at least NVDA, with which I am testing this) is reading that pseudo element and the included symbol, which I don't want. But since this element is not in the HTML code, I cannot add aria-hidden = 'true' to hide it from screenreaders.
Any idea what i could do to get the screenreader to ignore those pseudo-elements?
Know this is old, but recently had to answer this too and eventually found a better answer to this question
pseudo-elements; alternative text can be indicated after a /:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "*";
content: "*" / "";
}
In this case the blank alt text will cause this content to be ignored.
Note not all browsers support this syntax (basically just Chromium based browsers at this time of writing) so make sure you add a fallback first that works for all browsers and is only overridden by those that support this new syntax as well. Otherwise, without this fallback, browsers like Safari just ignore the unrecognised CSS line and fail to display anything when you use an / for alt text!
You can try using the speak property:
CSS:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
speak: none;
}
Pseudo-element inheritates from the main class their visibility for screen and screenreaders.
For instance, the following code will hide everything including the *
p:before {content:'*'}
p {display:none}
If you want the content of the pseudo element not to be read, you have to use an unprounounceable replacement like an UTF-8 equivalent :
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "\2022";
}
EDIT: \2022 announces "bullet" with NVDA while another code like \2023 for instance announces nothing
The scenario was "Send Mail" link associated with "Click Here To" text, but Screen Reader reads the whole text, but i want it to read only "Send mail".
Here i have solved that issue using "aria-label" attribute.
a
{
text-decoration:none;
}
a::before
{
content:"Click here to - ";
color:Black;
font-weight:bold;
}
Send Mail
Hope this will work for you guys.
I am using a CDN css file which sets a "top" property for an item which was recently added as a new release. This 'top' property completely throws off the height of a list item in my code. I am certain this is the culprit by use of Firebug.
Normally, I am able to override previously directed CSS properties (such as height, color, etc) but is there a way to essentially say "forget that I told you to set top: 24px, I want you to ignore that".
In essence:
.some-class > a:after {
....
top: 24px;
}
(in another file)
.some-class > a:after {
top: gothehellaway
}
Note: I have tried setting to 0, auto, and inherit without successful results.
Update 1:
I have tried using the recommended inherit but it does not work in any tested browser. I have also used top: auto !important and top: inherit !important without luck.
Update 2:
Just noticed in the CDN CSS file, there are actually two calls for the exact same property (although no idea why Zurb did it this way. Damn you Foundation 4):
.top-bar-section .has-dropdown > a:after {
...
top: 50%;
}
.top-bar-section .has-dropdown > a:after {
...
top: 22.5px;
}
The initial keyword represents the browser’s default value for a property.
.some-class > a:after {
top: initial;
}
initial has long been supported in Firefox, Chrome, and Safari, but is not supported in Internet Explorer.
Use initial to set it
for example
.some-class > a:after { top:initial; }
HTH
My css for a tree node icon is the following:
.icon {
background: url(http://dummyimage.com/100x100/ccc/fff);
width: 100px;
height: 100px;
position: relative;
}
.icon:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0;
}
I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.
I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?
The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.
looks like you forgot the class prefix in one of youre tests try .icon:after {}
I just wondered if this is in some way a css attribute:
http://dl.dropbox.com/u/14645664/fhjfhgf.JPG
Does anyone know ?
Nope, this is definitely not CSS.
However, that doesn't mean you can't do something similar with CSS.
Start with an element with a specific class, like "slashed":
<span class="slashed">True?</span>
Then, CSS pseudo elements/selectors to the rescue!
.slashed:before {
content:"╱";
display:block;
color:red;
font-size:2em;
position:relative;
left:1em;
top:5px;
}
Note that the slash used in the CSS is "╱", not "/", as it gives a better slash effect.
You can obviously tweak it by changing the top, left, and font-size properties.
The end result looks like:
Note that CSS :before won't work in IE7 below, and other (much) older browsers, so you'll want to have some sort of fallback.
http://jsbin.com/ohuxig/edit#html,live
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid ;
border-color: red;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
No, that is in no way a CSS attribute.
I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.