How do I make a text input non-editable

Question

So I have a text input   lt input type  text  value  3  class  field left  gt    Here is my CSS for it  background url  images number-bg png   no-repeat scroll 0 0 transparent  border 0 none  color  FFFFFF  height 17px  margin 0 13px 0 0  text-align center  width 17px     Is there a setting or a trick to this  I was thinking of doing a label instead but how about the styling  How do I convert them and is there a better way or is that the only way

User · Answer

You can add the attribute readonly to the input    lt input type  text  value  3         class  field left  readonly  readonly  gt    More info  http   www w3schools com tags att input readonly asp

User · Answer

lt input type  text  value  3  class  field left  readonly gt    No styling necessary   See  lt input gt  on MDN https   developer mozilla org en docs Web HTML Element input Attributes

User · Answer

Just to complete the answers available   An input element can be either readonly or disabled  none of them is editable  but there are a couple of differences  focus       Good explanation can be found here  What s the difference between disabled    disabled    and readonly    readonly    for HTML form input fields   How to use    lt input type  text  value  Example  disabled   gt    lt input type  text  value  Example  readonly   gt    There are also some solutions to make it through CSS or JavaScript as explained here

User · Answer

if you really want to use CSS  use following property which will make field non-editable   pointer-events  none

User · Answer

Add readonly    lt input type  text  value  3  class  field left  readonly gt    If you want the value to be not submitted in a form  instead add the disabled attribute    lt input type  text  value  3  class  field left  disabled gt    There is no way to use CSS that always works to do this   Why  CSS can t  disable  anything  You can still turn off display or visibility and use pointer-events  none but pointer-events doesn t work on versions of IE that came out earlier than IE 11

User · Answer

lt input type  text  value  3  class  field left  readonly gt    You could see  in https   www w3schools com tags att input readonly asp  The method to set  readonly       input   attr  readonly   true    to cancel  readonly  work in jQuery        input   attr  readonly   false

User · Answer

you just need to add disabled at the end   lt input type  text  value  3  class  field left  disabled gt

User · Answer

You can use readonly attribute  if you want your input only to be read  And you can use disabled attribute  if you want input to be shown  but totally disabled  even processing languages like PHP wont be able to read those

[html] How do I make a text input non-editable?

Examples related to html

Examples related to css

Examples related to html-input