Disable a textbox using CSS

Question

How to disable a textbox in CSS  Currently we are having a textbox in our view which can be enabled disabled depending on a property in the model  We are having asp net MVC view  depending on the value of the Model property we need to either render a textbox or readonly textbox  we were thinking of doing this by applying CSS to the view control  Has someone done this earlier

User · Answer

Another way is by making it readonly    lt input type  text  id  txtDis  readonly   gt

User · Answer

just copy paste this code and run you can see the textbox disabled       lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt  lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt title gt Untitled Document lt  title gt     lt style gt  container float left width 200px height 25px position relative           container input float left width 200px height 25px           overlay display block width 208px position absolute top 0px left 0px height 32px     lt  style gt    lt  head gt   lt body gt         lt div class  container  gt          lt input type  text  value  rvi tom gmail com    gt          lt div class  overlay  gt           lt  div gt          lt  div gt    lt  body gt   lt  html gt

User · Answer

You can t disable a textbox in CSS  Disabling it is not a presentational task  you will have to do this in the HTML markup using the disabled attribute   You may be able to put something together by putting the textbox underneath an absolutely positioned transparent element with z-index    But that s just silly  plus you would need a second HTML element anyway   You can  however  style disabled text boxes  if that s what you mean  in CSS using  input disabled            from IE7 upwards and in all other major browsers

User · Answer

Going further on Pekka s answer  I had a style  style1  on some of my textboxes  You can create a  style1 disabled   so you style only the disabled textboxes using  style1  style    style1 disabled            Worked ok on IE8

User · Answer

You can t disable anything with CSS  that s a functional-issue  CSS is meant for design-issues  You could give the impression of a textbox being disabled  by setting washed-out colors on it   To actually disable the element  you should use the disabled boolean attribute    lt input type  text  name  lname  disabled   gt    Demo  http   jsfiddle net p6rja   Or  if you like  you can set this via JavaScript   document forms  formName    inputName   disabled   true        Demo  http   jsfiddle net 655Su   Keep in mind that disabled inputs won t pass their values through when you post data back to the server  If you want to hold the data  but disallow to directly edit it  you may be interested in setting it to readonly instead      Similar to  lt input value  Read-only  readonly gt  document forms  formName    inputName   readOnly   true    Demo  http   jsfiddle net 655Su 1   This doesn t change the UI of the element  so you would need to do that yourself   input readonly         background   CCC       color   333       border  1px solid  666      You could also target any disabled element   input disabled       styles

User · Answer

CSS cannot disable the textbox  you can however turn off display or visibility    display  none  visibility  hidden    Or you can also set the HTMLattribute   disabled  disabled

User · Answer

you can disable via css   pointer-events  none     Doesn t work everywhere though

User · Answer

tl dr   No  you can t disable a textbox using CSS   pointer-events  none works but on IE the CSS property only works with IE 11 or higher  so it doesn t work everywhere on every browser  Except for that you cannot disable a textbox using CSS   However you could disable a textbox in HTML like this     lt input value        readonly   gt    But if the textbox is in a form and you want the value of the textbox to be not submitted  instead do this    lt input value        disabled   gt    So the difference between these two options for disabling a textbox is that disabled cannot allow you to submit the value of the input textbox but readonly does allow   For more information on the difference between these two  see  What is the difference between disabled  disabled  and readonly  readonly

User · Answer

Just try this    lt asp TextBox ID  tb  onkeypress  javascript return false   width  50px  runat  server  gt  lt  asp TextBox gt    This won t allow any characters to be entered inside the TextBox

[css] Disable a textbox using CSS

Examples related to css

Examples related to textbox