Stop Firefox Rendering Inline Colours in Rgb() Form

Stop Firefox rendering inline colours in rgb() form

Check out this script to convert rgb() notation to hex.

Why are 3-digit hex color code values interpreted differently in Internet EXPLORER?

I was able to recreate it in IE11 as well. As you know, it is a deprecated attribute. I assume your webpage & the browser are trying to interpret the code as HTML5 and there is a bug in their graceful degradation to handle this. So it just breaks.

As @Aaron Vanston points out, using inline style or CSS, you can still use the shorthand hex to apply a color.

I wouldn't even waste my time writing out bgcolor as an attribute. If I came across it in something I was working on, I'd remove it in favor of

style="background-color: #fff"

or the CSS alternative

body {
    background-color: "#fff";
}

Why jQuery replaces hsl() with rgb()?

jQuery has nothing to do with this behaviour - it's simply because browsers render the value in RGB format. You can't change it unfortunately. If you want to get the value in HSL format you need to convert it back from RGB. This question can help you with that, if required.

To prove the above, here's a native JS implementation that exhibits the same behaviour:

[172, 178, 184, 190, 196, 202, 208].forEach(function(backgroundHue) {  var span = document.createElement('span');  span.style.backgroundColor = 'hsl(' + backgroundHue + ', 75%, 43%)';  document.querySelector('.add-em-here').appendChild(span);});

.add-em-here span {  display: inline-block;  height: 40px;  width: 40px;  border: 2px solid white;  margin-left: 6px;}

<div class="add-em-here">  <!-- Added statically - stays with hsl() -->  <span style="background-color: hsl(60, 75%, 43%)"></span>
  <!-- Added dynamically - auto-replaced with rgb() --></div>

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

Background color not showing in print preview

The CSS property print-color-adjust: exact; works appropriately.

However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print and @media screen.

Often times just setting up some extra @media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.

In your case, the print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.

While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Here is the fiddle (and embedded for ease of print previewing).

Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?

As per the spec:

If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one.

Meaning that no matter what is your input, the computed value always results in either rgb or rgba.

So, answering your question: yes, it is standard behaviour and no, you can't use hex or hsl as it will be computed back to rgba.

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

---

Related Topics