Member Avatar for OmniX

This is what happens:

I have an input submit button.
On mouse over text is changed from RED to WHITE.
On mouse out text is changed from WHITE to RED.

Simple eh?

Well IE does it fine but FF makes everything change to RED border, etc.

jscript:
function over(button) {
	button.style.color 			= "#FFFFFF";
}

function out(button) {
	button.style.color 			= "#FF0000";
}

my input button:
<input onMouseOver="over(this)" onMouseOut="out(this)" class="input" type="submit" id="input" name="input">

Any Ideas?

Thanks, Regards X

  • 2 Contributors
  • 3 Replies
  • 230 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by OmniX

Dani AI

Generated

Short note: was right to switch to CSS hover — that’s the simplest fix. The reason Firefox was changing the whole button look when you only changed color is CSS behavior: the color property sets the element’s <currentcolor> value, and border-color defaults to that <currentcolor>, so a text-color change can make a UA-styled button border follow the text color. (developer.mozilla.org) Browsers also use system color keywords for controls (ButtonFace/ButtonText), so native button styling can react to those values. (developer.mozilla.org)

Practical fixes (CSS-first)

  • Explicitly set the border color (and style/width) so it does not inherit currentColor.
  • If you want to remove native platform rendering and style the control fully, use appearance: none (test carefully across browsers). (developer.mozilla.org)

Example (keeps hover changing text only):

/* explicit border so it won't follow `color` */
input[type="submit"].btn {
  color: #ff0000;
  border: 2px solid #999;     /* override UA default that might use currentColor */
  background: none;
  appearance: none;           /* optional: remove native widget styling */
  -webkit-appearance: none;
}

/* only the text changes on hover; border-color stays the same */
input[type="submit"].btn:hover {
  color: #ffffff;
  border-color: #999;
}

/* keep keyboard focus visible for accessibility */
input[type="submit"].btn:focus-visible {
  outline: 3px solid Highlight;
  outline-offset: 2px;
}

If you must use JavaScript, toggle a class instead of inline handlers (cleaner and works with :hover-style rules):

document.querySelectorAll('input[type="submit"]').forEach(btn => {
  btn.addEventListener('mouseenter', () => btn.classList.add('hover'));
  btn.addEventListener('mouseleave', () => btn.classList.remove('hover'));
});
/* CSS: input[type="submit"].hover { color: #fff; } */

Tip: open DevTools, inspect the button, and check the user-agent rules to see which properties (border-color, background, appearance) the browser applies by default — that quickly reveals why a color change affected the border. Also don’t remove focus outlines unless you replace them with an equally visible focus style. References above explain currentColor/border defaults and the appearance property. (developer.mozilla.org)

Member Avatar for OmniX

Figured out a solution using CSS.

Member Avatar for peter_budo

Can you post that snipped of code so other can re-use it if they find themselfs in same situation?

Member Avatar for OmniX

Well there is nothing about posting code as such as its more of a function.

I just used the 'hover' function in css to do the same thing(which was alot more friendlier).

Hover was never working for me before in FF and I think since the updates it does.

So the code would be in css:

.class:hover {
 styles
}

That good enough or should more detail be included?

Thanks, Regards X

commented: Thank you for sharing +7
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.