I wanted to control the line thickness of the underline property in my css file. I simply tried out something like this...
h1{
text-decoration: underline black 1px;
}
... and it worked!
However, when I tried to validate my CSS file, the W3C CSS validator indicates that the '1px' property isn't a valid text-decoration value. I also cannot find line thickness to be a part of text-decoration's properties. Yet, I find that it works on Chrome, Firefox and Edge.
Can anybody explain why a CSS property that isn't documented and doesn't validate nevertheless works?
The thickness can be controlled with: text-decoration-thickness property.
The color of the with: text-decoration-color property.
h1 {
text-decoration: underline;
text-decoration-thickness: 50px;
text-decoration-color: red;
}
<h1>Our Elixirs</h1>
Modern browsers have really good UA (User Agents = default CSS) to correct most markup error. However the best place to look for documentation is MDN Web Docs
MDN lists it.
If you want to be on the safer side, you can define text-decoration-thickness separately.
Can anybody explain why a CSS property that isn't documented and doesn't validate nevertheless works?
That's modern web dev for you.
Related
Is there any reason why this does not work on Internet Explorer or Chrome:
<html>
<head>
<style>
A {font-weight: bold; color:black;}
A:visited {font-weight: normal; color: black; }
.Empty {font-weight: bold; color: black; }
</style>
</head>
<body>
click me
</body>
</html>
The link I click never goes to normal and just stays bold. On some other browsers it works.
Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.
One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
One useful attribute that does work with :visited is background-color. So try:
:visited {background-color:red;}
:visited also works on non-a elements.
The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.
I came up with the following workaround to reach the desired effect.
It is possible to change the background-color of the visited link.
The solution is very simple:
set a background-image on the link with the same height as your link
and 1px width and repeat the image horizontally
the image has the same color as the background of the link
make one pixel of that image transparent, in the vertical middle
on :visited state just change the backgroundcolor of that link to the text-color of the link
Only one line of the background-color wil be visible, because the background-image is masking it
Here's an example:
a:link {
color:#000;
background:#FFF url('../img/linethrough.png') repeat-x top left;
}
a:visited {
background-color:#000;
color:#000;
}
CSS itself is not case-sensitive, but if the HTML file using this style has an XML declaration and an XHTML doctype, that CSS is not going to work, because tags are case-sensitive. You'll have to set the "a" tags to lower-case.
Explained here:
http://reference.sitepoint.com/css/casesensitivity
Perhaps try changing the color attribute and see whether that has an effect at all.
To troubleshoot, you might want to try to utilize the developer tools in chrome to see what style is applied.
You need to have separate declarations for a:link, a:visited, a:active, etc.
Remove your first style that does not contain a colon. It's overriding. Replace with a:link.
About the problem:
The link is the inVision design of an input element with custom css styles.
As you can see, its border is removed except the bottom line and the cursor/blinker looks pretty thick.
Here's what I have done so far.
<input class="custom-input" />
.custom-class {
border: none;
border-bottom: #eee solid 3px;
line-height: 2;
font-size: 36px;
text-align: center;
caret-color: #231F20;
}
What is missing so far is that the blinker is still an ordinary one.
I have gone through research to find answers. There are a bunch of articles and StackOverflow answers for caret-color but none of them answers how to change the thickness of it.
Also, there is a codepen demo for using a span element by enabling the content to be editable.
But my question is "Is there a solution with only css styles after all the days of evolution in modern css?"
Thanks in advance.
PS. I am not looking for caret-color property solutions. I am talking about the thickness of the blinker specifically.
I don't know if you can modify the text caret thickness (I only see one related property), but you can change its color with caret-color.
There seems to be some ways to change the caret thickness using OS tools, but none in css for the moment.
Edit: There is another way to customize the caret: use js to create a new caret above the classic one (src -> link, src2 -> link2 (jQuery plugin)).
I forked a codepen, and I think you can use the "cutom caret" to hide the authentic one :)
This is a learning exercise for me, so thanks in advance for not telling me why I don't want to do to the following. I don't want to do, I want to understand.
Given the following CSS:
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input[type="checkbox"]:focus {
outline: none;
}
The specificity for both shows as 0,2,1, and everything I read about CSS says the second style should override the first as it comes last. If I get more specific about the second style, it wins. But as posted, Chrome doesn't display the outline, but IE11 and FF28 do. This seems to me to be such a fundamentally simple application of CSS. Does anyone have any insight into what the underlying issue is, so that I can pull it into my thinking as I'm developing stylesheets?
EDIT: Chrome also doesn't display the outline if I delete the second style. In Chrome, the outline: thin dotted are overridden by the following outline line. So it appears that per the spec, Chrome is playing by the book and FF and IE don't? Could it be a union vs. override difference in how browsers interpret CSS?
With apologies, the error was mine. When I switched from bootstrap.min.css to bootstrap.less, I didn't remove the former from loading so it was loaded last and overrode my Site.less -> site.css. I figured it out after I tried to create a fiddle, which I should have done in the first place. Feel free to down-mod this post to hell in the way that it deserves.
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
I have an Html.ActionLink on my page and I am using the following CSS on it to give it an image and try and remove the underlining.....
a.searchButton
{
background-image: url(/content/images/DropAcross.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: block;
text-decoration: none;
clear:none;
}
Can anyone see a problem with this? All the CSS properties seem to work apart from the text-decoration: none, which seems to leave the underline in place.
You would have to look at the rendered html. In Firefox or Google Chrome, right click and choose Inspect Element.
You might find something silly like the searchButton class is being applied to a span that wraps the a tag, in which case, you would get everything working except the link specific rule:
text-decoration:none;
I know that it is old topic, but maybe somebody will considere it helpful -
"text-decoration" attribute, mentioned above, can be passed to ActionLink by construction like this:
#Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})
Setting text-decoration:none; ought to work.
Is it possible that there are some other styles overriding it? Have you looked in Firebug (or similar tools) to see what styles are being applied?
One possible answer may be the :hover, :visited and :active pseudo classes. If they are set to have an underline, then they will override the default style for the element.