Member Avatar for sushmaja.arumalla.9

Disabled or ReadOnly input field shows Stop symbol when mouse overs on it.How to get out of this problem.The look doesn't satisfied. Please help me how to show only cursor symbol when mouse overs on any disabled or read only input fields.

  • 4 Contributors
  • 4 Replies
  • 286 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Browsers show that "stop" / "not-allowed" symbol because a disabled control is intentionally non-interactive. Readonly is different: it stays focusable and selectable and will show the text caret (I‑beam) when appropriate. was right that CSS can change the cursor (and solved it that way), but a more robust approach is to use a readonly field styled to look disabled — that keeps the I‑beam and preserves form value behavior.

A practical pattern:

<input type="text" value="Can't edit, but selectable" readonly class="look-disabled" aria-disabled="true">
.look-disabled[readonly] {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #cfcfcf;
  box-shadow: none;
}

/* optional: remove focus outline if you want the "disabled" look,
   but be careful for keyboard users — prefer a visible but subtle focus style */
.look-disabled[readonly]:focus {
  outline: 1px dotted #999;
}

Why this helps

  • readonly keeps the control focusable and text-selectable (so the I‑beam appears on hover/click).
  • disabled removes focusability, and many user agents show the not‑allowed cursor for a reason.
  • readonly values are submitted with forms; disabled values are not — choose based on desired behavior.
  • for accessibility, add an appropriate ARIA attribute if the control must be announced as non-editable (but avoid using ARIA to hide native semantics).

Troubleshooting and cross‑browser notes

  • Verify your selectors' specificity — a stronger rule (inline or UA) could override your styles.
  • Test in multiple browsers/platforms as suggested; UA defaults vary.
  • If you truly must use a disabled attribute but want a different cursor, a CSS override is possible — weigh that against the loss of the semantic cue that the control is inactive.

Recommended Answers

All 4 Replies

Member Avatar for mattster

Example? Source code? Links/demos?

Come on try a bit.

Member Avatar for JorgeM

You can change the behavior of the cursor with CSS styles. #elem { cursor: some_value }.

it would be best if you provide an example here, or its fantastic if you setup an example on jsfiddle.net, or if you have php code, try phpfiddle. i havent used it but have seen others mentioning this site.

Edited by JorgeM
Member Avatar for sushmaja.arumalla.9

Thanq JorgeM.....
I have changed the value of cursor attribute to cursor :text in my css page.
It works fine for me.

Member Avatar for almostbob

User agent behaviour is specific to the user agent, other browsers have a different default behaviour on each element. that may need a correction
portable firefox, safari, chrome, lynx, portable versions of any major browser that you arent using for development, are good for testing that your code works for others. Nothing is going to be perfect, It helps a lot, they dont mess with your system, just drop in a folder
IE doesnt have a portable there is a workaraound IEtester
I don't think anybody is using ie but Joe Public is

Edited by almostbob
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.