发表新帖
发表新帖

Disable a textbox using CSS

前端 未结
关注
9 1202
粉色の甜心
粉色の甜心 2020-12-24 00:23

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

相关标签:
9条回答
  • 终归单人心
    2020-12-24 00:49

    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.

    0 讨论(0)
  • 野的像风
    2020-12-24 00:53

    **just copy paste this code and run you can see the textbox disabled **

    <html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title> 

<style>.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;} 
</style>
 </head>
<body>
      <div class="container">
       <input type="text" value="rvi.tom@gmail.com" />
       <div class="overlay">
        </div>
       </div> 
</body>
</html>
    0 讨论(0)
  • 滥情空心
    2020-12-24 00:53

    Another way is by making it readonly:

    <input type="text" id="txtDis" readonly />
    0 讨论(0)
  • 难免孤独
    2020-12-24 00:54

    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:

    <input type="text" name="lname" disabled />

    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 <input value="Read-only" readonly>
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 */ }
    0 讨论(0)
  • 灰色年华
    2020-12-24 00:55

    &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: 

    <input value="...." readonly />

    But if the textbox is in a form and you want the value of the textbox to be not submitted, instead do this:

    <input value="...." disabled />

    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".

    0 讨论(0)
  • 梦谈多话
    2020-12-24 01:01

    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"
    0 讨论(0)
 看不清?
提交回复
热议问题