This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed last year.
When I inspect the html with IE Developer tools, I see that there is one inline style for a button:
I don't want any width property for this input element. How can I disable or overwrite this with empty width?
If you want to override inline styles then you need to add styles in your stylesheet with !important
for e.g.
width: auto !important;
Reference - CSS Specificity
You can disable inline styles for any given element using JavaScript:
Locate the button in the HTML document
Remove the button's style attribute
var button = document.getElementById('myButton');
button.removeAttribute('style');
Update for 2022+
If anyone else stumbles upon this in the present, you can do much more than remove an inline HTML style tag with JavaScript. You can keep the tag around in case you want to return it later. There are two ways you can do it!
One way: "Disabled" HTML property
I've heard tell that using disabled on the HTML tag will stop your browser from processing it. But I had trouble getting this to work on Firefox. Maybe someone can enlighten me about that!
<style class='style-class' disabled>
body { color: blue; }
</style>
So you'd just
$('.style-class').prop('disabled', true)
Another way: Changing the tag itself
Your browser will only parse styles within a style tag. So if you change the tag to anything else, you'll still be able to inspect it in the DOM just fine, but it won't treat it as a stylesheet.
(jQuery used for the explanation here)
$(style.selector).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $('<nostyle>')
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
});
Then when you're ready to return the style, use this:
$(notstyle.selector).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $('<style>')
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
});
Related
I have a table built with a column of links using the default browser rendering for anchors. There is a search which uses XSL to display search results. However, the XSL needs a specific CSS class to render the anchor elements.
I am trying to match the CSS class with the color the browser uses for anchor elements. However, through all this trial and error, I can't get a match on shading. I initially tried color: blue in the CSS class but that's not even close, it comes out purplish.
If I try to ignore color: in the CSS class, the link comes out black.
I guess what I was wondering if it's possible to set the color in CSS to something like this...
color: Use browser anchor default
thank you.
The default colour of a link according to browser styles is: rgb(0, 102, 204)
If you don't alter the CSS, this would be the default. If you are seeing something slightly purple, I'm guessing this is because it has been visited and receives dedicated styling.
This can be amended in your CSS by targeting a:visited { }
EDIT: If you need to remove a style which has overridden the browser default, you could also use the 'revert' property; e.g. color: revert (which is also part of the all property). See the support here on caniuse.com, and more details on MDN.
You can get the default color with getComputedStyle
var el = document.createElement("a");
el.href = "#";
document.body.appendChild(el);
console.log(getComputedStyle(el).color);
document.body.removeChild(el);
Node: the element needs to be part of the document, otherwise color is an empty string
To find out the color, you cn use this script in JS:
const linkColor = document.getElementById('link').style.Color
and this HTML Code
<a href="#" id='link' hidden>
To try it, you can use this html-page:
<html>
<body>
<a href="#" id='link' hidden>
<script>
console.log(document.getElementById('link').style.Color)</script>
<body>
</html>
This should log the link-color in the console.
As long as you're targeting modern browsers, and your goal is to REMOVE any styling already applied, you can use the "all" property.
a.specificClass {
all: initial;
}
This will reset all properties to their browser default.
If all you want is to change the color, you can still use the initial or unset values.
a.specificClass {
color: initial;
}
MDN Web Docs - Can I Use (All)
I want to remove HTML elements classes using CSS. What is the method of removing classes from HTML using CSS?
CSS cannot modify the classes applied in the DOM and is used only for visual styling.
To change classes of an element you have to use JavaScript
You can't. CSS is Cascading Style Sheets and is used only for styling, read more about CSS in this w3chools article.
For changing element's class you need to use Javascript, there are a bunch of methods to do this and most famous of them are pureJS DOM methods which you can learn here and of course amazing JQuery, both are not very hard and convenient but I prefer JQuery myself
You can't remove classes with CSS because that's for styling only and it can't modify the DOM. JavaScript hover, is able to do that. You could use this snippet to achieve that:
const classesToRemove = ['class1', 'class2', 'class3'];
const removeClassesFromElements = () => {
classesToRemove.forEach((className) => {
let elements = document.getElementsByClassName(className);
for (let element of elements) {
element.classList.remove(className);
}
});
};
document.addEventListener('DOMContentLoaded', (event) => {
removeClassesFromElements();
});
<h1 class="class1"></h1>
<p class="class2"></p>
<hr class="class3" />
CSS can't modify any HTML elements. But You can use pseudo classes for certain triggers.
Use :focus or :hover. Also you can use checked state of a hidden checkbox like
checkbox:checked + .btn {
color: #fff;
background-color: #6b15ce;
}
I have an anchor element with a title attribute. I want to hide the popup that appears when hovering over it in the browser window.
In my case, it is not possible to do something like this,
$("a").attr("title", "");
Because of jQuery Mobile the title will reappear after certain events occur (basically everytime the anchor element gets redrawn).
So I hope to hide the title via CSS.
Something like:
a[title] {
display : none;
}
doesn't work, since it hides the entire anchor element. I want to hide the title only. Is this even possible? The popup shouldn't display.
Using the following CSS property will ensure that the title attribute text does not appear upon hover:
pointer-events: none;
Keep in mind that JS is a better solution since this CSS property will ensure that the element is never the target of any mouse events.
You can wrap your inner text in a span and give that an empty title attribute.
<a href="" title="Something">
<span title="">Your text</span>
</a>
As per #boltClock's suggestion, I'll say I don't feel that a CSS solution is appropriate here, as the browser decides what to do with the title attribute of a link, or anything for that matter. CSS, to my knowledge, is unable to handle this issue.
As mentioned, using jQuery to replace the title with an empty string wont work because jQuery mobile rewrites them at some points. This, however, will work independently of JQM, and doesn't involve entirely removing the title attribute which is SEO important.
This works:
$('a["title"]').on('mouseenter', function(e){
e.preventDefault();
});
I changed my initial code of $('body').on('mouseenter') to this after testing. This is confirmed to work.
In CSS it's not possible, because you can only add contents to DOM (tipically with :before :after and content: '...';, not remove or change attributes.
The only way is to create a live custom event (es. "change-something"):
$("a").on("change-something", function(event) { this.removeAttr("title"); });
and trigger to every changes:
... $("a").trigger("change-something");
More information and demo here:
http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/
try to change your code using this
$(document).ready(function() {
$("a").removeAttr("title");
});
this will remove title attribute so the hint label won't be appear when hover on the link
$("#test").tooltip({title: false});
There title attribute default value is true, make it false.
This will work only in case of Bootstrap Tooltip
Full working pure javascript solution
var anchors = document.querySelectorAll('a[title]');
for (let i = anchors.length - 1; i >= 0; i--) {
anchors[i].addEventListener('mouseenter', function(e){
anchors[i].setAttribute('data-title', anchors[i].title);
anchors[i].removeAttribute('title');
});
anchors[i].addEventListener('mouseleave', function(e){
anchors[i].title = anchors[i].getAttribute('data-title');
anchors[i].removeAttribute('data-title');
});
}
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 4 years ago.
innerHTML1
innerHTML2
innerHTML3
I want to style the second only (innerHTML2) using CSS selectors, based on the inner HTML. Is this possible? I've tried using a[value=innerHTML2] but it doesn't seem to work.
This is not possible using CSS. You can, however, do it using jQuery. There's a nice blog post on it you can read.
It's currently not possible for all browsers with css, but with javascript you can do this
Updated w/ working code. JSFiddle link below:
Initial HTML per #whamsicore:
innerHTML1
innerHTML2
innerHTML3
JavaScript:
var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
if(myEles[i].innerHTML == ' innerHTML2 '){
console.log('gotcha');
//use javascript to style
myEles[i].setAttribute('class', "gotcha");
}
}
CSS for styling:
/* make this look a bit more visible */
a{
display: block;
}
.gotcha{
color: red;
}
https://jsfiddle.net/kjy112/81qqxj23/
Using CSS you can't detect the content of the anchor tag.
[value=] would refer to an attribute on the tag
innerHTML2
Not very useful since the value attribute isn't valid HTML on an a tag
If possible, slap a class on that a tag. As that is most likely not possible (because you would've already done that) you can use jQuery to add a class on that tag. Try something like this:
<script type="text/javascript">
$(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
</script>
And then use .anchortwo as your class selector.
you can use the css nth-child property to access any element and do any changes. i Used it on a website i made to make a logo smaller or bigger based on the width of screen.
Using pup, a command line tool for processing HTML using CSS selectors, you can use a:contains("innerHTML1").
For example:
$ echo ' innerHTML1 ' | pup 'a:contains("innerHTML1")' text{}
innerHTML1
<style>
a[data-content]::before {
content: attr(data-content);
}
a[data-content="innerHTML2"] {
color: green;
}
</style>
This is quite simple with a nth-child selector.
<style>
a:nth-child(2) {
color: green;
}
</style>
innerHTML1
innerHTML2
innerHTML3
Edit: Here's the source I found this at. Check here for browser compatability.
Source: http://reference.sitepoint.com/css/pseudoclass-nthchild
How can I set the default style for a checkbox in jquery or javascript or even html code?
or in another way how to disable the styling for checkbox.
there is a external css file that set the style for all checkboxes, but I would like to override the style to default style for specific checkboxes.
thanks
I use css' !important whenever I want to override some values.
But most modern browsers allow specific css selector like
input[type="checkbox"] {
//insert style here
}
you can use this to manipulate any style specific to checkboxes.
good luck.
This can be done easiest by controlling the CSS that's styling your check box to begin with.
Instead of the CSS on your page laying styles for all constants (body img input). Instead assign classes to the individual items if you want them styled a special way.
So dont use:
input { background: #000; }
Use:
<style>
.mystyle { background: #000; }
</stlye>
</head>
<body>
<input type="checkbox" class="mystyle">
Check to make sure all CSS on your site is clear of constants, this will make sure everything is set to default on all your pages and only styled at your choosing.
You can use JQuery to reset a css value ... like
$(this).css("color","red");
------------samples------------
$(document).ready(function() {
/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");
/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
}
);
});
});