Disable a textbox using CSS

2020-02-17 06:19发布

站内问答 / HTML/CSS
1906 9 5

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?

标签： css textbox
举报
9条回答
何必那么认真
2楼-- · 2020-02-17 06:31

you can disable via css:

pointer-events: none;

Doesn't work everywhere though.

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
3楼-- · 2020-02-17 06:37

**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) 举报
爷的心禁止访问
4楼-- · 2020-02-17 06:37

Short answer

No, you can't disable a textbox using CSS.

Long answer

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) 举报
虎瘦雄心在
5楼-- · 2020-02-17 06:41

another way is by making it readonly

<input type="text" id="txtDis" readonly />
查看更多
0人赞 添加讨论(0) 举报
放我归山
6楼-- · 2020-02-17 06:45

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.

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
7楼-- · 2020-02-17 06:50

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) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)