Semi-disabled form text fields with CSS

14 July, 2008 (19:37) | CSS, Web designing | By: Rohan Shenoy

The other day on the DigitalPoint webmaster forums, I had somebody ask this question “How to half-disable a form field”.

From all the HTML I knew, it was not possible in a straight-forward way! But we can manipulate with CSS.

The HTML-CSS

[-]View Code HTML
<span style="border: 2px inset;">
   <input style="border: none; text-align: right;" name="half_1" size="3" type="text" value="ABC" />
   <input style="background: #FFFFFF; border: none;" name="half_2" readonly="readonly" size="3" type="text" value="123" />
</span>

Comments

Comment from T
Time August 15, 2008 at 8:18 pm

I didn’t know that !
Thanks, Btw have you used spry framework ?
Its awesome for client side validations. I have one page where I use it :p

Comment from Rohan Shenoy
Time August 16, 2008 at 10:34 pm

^Bope, never used any framework :)…actually got into the habit of procedural coding till I don’t obtain a decent and fluent knowledge of JS. May be afterwards! But I am fascinated by jQuery!

Write a comment