如何使用CSS禁用表单字段？

179

是否可以使用CSS禁用表单字段？我当然知道禁用的属性，但是可以在CSS规则中指定此属性吗？就像是 -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

我问的原因是，我有一个应用程序，其中表单字段是自动生成的，并且字段是根据某些规则（以Javascript运行）隐藏/显示的。现在，我想扩展它以支持禁用/启用字段，但是规则的编写方式可以直接操作表单字段的样式属性。因此，现在我必须扩展规则引擎以更改属性以及表单字段的样式，这在某种程度上似乎并不理想。

很好奇您在CSS中具有visible和display属性，但没有启用/禁用。仍在进行中的HTML5标准中是否有类似的东西，甚至是非标准的东西（特定于浏览器）？

html css

— 阿努帕姆（Anupam Jain）
source

5

下面多次提到它，但是却被噪音所笼罩。尝试指针事件：无；

— Corey Alix

88

这可能会有所帮助：

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

更新：

如果要从选项卡索引禁用，则可以通过以下方式使用它：

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

— 费雷敦·巴里克西（Fereydoon Barikzehy）
source

3

这看起来像刚才我是禁止所有的输入域之后，但，尽管它会立即拦截鼠标事件，他们仍然可以使用键盘选项卡访问和更改

— 肯·

11

tab-index css属性不存在。它必须是html属性（tabindex = -1）

— N4ppeL

1

tab-index找不到并且在chrome中不起作用，点击TAB键已通过了禁用功能，因此这不是完整的解决方案。

— QMaster

172

您可以使用CSS伪造禁用的效果。

pointer-events:none;

您可能还想更改颜色等。

— 奈美
source

68

这会有所帮助，但不会阻止切换至这些字段。

— jerwood 2014年

我想“禁用”面包屑的最后一个链接，但我并没有考虑到这种解决方法……这要归功于颜色的一些更改且没有下划线，这才是窍门！：D

— Facundo Colombier 2015年

2

这也不会阻止表单值被提交。

— 肯·韦恩·范德林德'17

1

@KenWayneVanderLinde禁用属性也不正确吗？

— theonlygusti

2

@theonlygusti表单中的禁用<input>元素将不会提交。

— dougd_in_nc

113

由于规则在JavaScript中运行，为什么不使用javascript（或在我的示例中为jQuery）禁用规则？

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

更新

如attr下面的注释中所指出的，该功能不再是实现此目的的主要方法。现在，通过prop函数完成此操作。

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

— 荷兰人432
source

1

那不应该是$（'＃filedId'）。removeAttr（'disabled'）; //启用

— Anupam Jain

6

可能值得注意的是，如果用户禁用了JavaScript，则此解决方案将无法使用。

— josh-fuggle 2013年

1

Firefox 20.0（不确定其他版本，这正是我要开发的版本）需要删除该属性。虽然@ Dutchie432在理论上是正确的，但请使用.removeAttr（'disabled'）;。是正确的实用解决方案（至少在我当前的浏览器中）。

1

除非您不能使用JQuery。

— 海军陆战队

3

仅供参考-jQuery文档建议在这种情况下使用.prop()代替.attr()。“从jQuery 1.6开始，.attr（）方法对尚未设置的属性返回未定义。要检索和更改DOM属性，例如表单元素的选中，选定或禁用状态，请使用.prop（）方法。 ” 原始文档：.attr（）和.prop（）

— Nicholas Ryan Bowers

54

很好奇您在CSS中具有visible和display属性，但没有启用/禁用。

您认为这很好奇，这很好奇。您误解了CSS的目的。CSS并非旨在更改表单元素的行为。只能更改其样式。隐藏文本字段并不意味着该文本字段不再存在，也不意味着您提交表单时浏览器不会发送其数据。它所做的就是将其隐藏在用户的视线之外。

要实际禁用字段，必须使用disabledHTML中的属性或disabledJavaScript中的DOM属性。

— BoltClock
source

34

当然，我知道CSS是“应该”做什么的。但是对于现代Web应用程序，“表示”和“行为”之间的区别比泥泞更糟。由于禁用的字段不会提交到服务器，因此是一种行为更改。但是，如何隐藏所有表单字段而不是一个呢？也许在过去的美好时光中，您在网上可以做的只是阅读文本和填写表格，因此区别更加明显。在现代的Web应用程序中，如果要将演示文稿与行为分开，则CSS与HTML / JS是错误的方式。

— 阿努帕姆·贾因

17

禁用是一种状态，而不是一种行为。他要的是完全合理的。例如，您可能想在处理数据时向多个字段添加忙类。此外，W3C似乎同意，因为它允许CSS通过禁用的伪类来选择元素。

— 13年

3

@IAmNaN：1）“禁用是一种状态，而不是一种行为。” 几乎所有其他HTML / DOM属性也是如此。2）“例如，您可能想在处理数据时向多个字段添加忙类。” 您可以在脚本中执行此操作。3）“此外，W3C似乎同意，因为它允许CSS通过禁用的伪类来选择元素。” 能够根据启用还是禁用来选择元素与使用CSS 更改状态无关。

— BoltClock

5

CSS中有很多东西实际上可以被认为是行为的改变，例如：pointer-events：none; @ANaimi提到过。因此，禁用也可以很容易地视为显示属性。事实并非如此，这会使事情变得简单。

— MikaelLepistö2014年

1

@MikaelLepistö：是的，我也不同意pointer-events成为CSS属性。仅供参考，pointer-events 源自SVG。

— BoltClock

22

您不能使用CSS禁用文本框。解决方案将是HTML属性。

disabled="disabled"

— 维斯瓦纳特·达尔维（Vishwanath Dalvi）
source

尽管这在原则上是可行的，但如果您阅读了完整的问题，它表示表单字段是自动生成的，然后需要将其禁用。

— thelem 2014年

1

@mr_eclair。可以使用--->指针事件：none; CSS属性。

— Fereydoon Barikzehy

3

注意：具有disabled属性的元素不会提交 -它们的值不会发布到服务器。继续阅读：stackoverflow.com/q/8925716/1066234

— Kai Noack 2015年

17

实际的解决方案是使用CSS实际隐藏输入。

要自然地得出结论，您可以为每个实际输入编写两个html输入（一个启用，一个禁用），然后使用javascript控制CSS来显示和隐藏它们。

— 图形神
source

3

如果您使用Javascript，则根据需要禁用/启用就有意义了吗？

— MindVox

确实，但是在这个特定问题的背景下，这可能是一种可行的方法。

— graphicdivine

10

第一次回答某件事，似乎有点晚了...

如果您已经在使用它，我同意通过javascript进行。

对于复合结构，就像我通常使用的那样，我制作了一个css伪元素，以阻止元素与用户交互，并允许样式化，而无需操纵整个结构。

例如：

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

我可以disabled在包装上上课div

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

这会使内的文本div变成灰色，并使用户无法使用。

我的示例JSFiddle

— 拉奇
source

4

顺便说一句：您仍然需要处理制表符，该制表符仍然允许用户访问该字段并进行更改。

— K Kimble

2

所以<select>不应该有一个class =“ disabled”吗？

— TimoSolo

我知道有这样的事情真是太好了。:)谢谢

— James Harrington

这真的很有用。我知道使用javascript来设置禁用状态会更好，但这解决了我的问题，即向用户明确说明（除了错误消息）提交不起作用。

— jerclarke

7

我一直在使用：

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

然后将css类应用于输入字段：

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

— 凯诺克
source

4

输入[名称=用户名] {禁用：true; / *不起作用* /}

我知道这个问题已经很老了，但对于遇到此问题的其他用户，我认为禁用输入的最简单方法是通过'：disabled'

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

实际上，如果您有一些脚本可以使用javascript或jquery来动态/自动禁用输入，这些脚本会根据您添加的条件自动禁用。

以jQuery为例：

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

希望CSS中的答案有所帮助。

— Shaze
source

2

恐怕您无法做到这一点，但是如果您不想将属性添加到字段中，可以在jQuery中执行以下操作。只需将其放在<head></head>标签内

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

如果要在DOM中生成字段（使用JS），则应改为：

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

— Cfrim
source

1

通过将覆盖层放置在输入元素的顶部，可以出于非关键目的进行此操作。这是我的纯HTML和CSS示例。

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

— 脱铁狗
source

1

为此，无法使用CSS。我的建议是包括一个javascript代码，您可以在其中分配或更改应用于输入的css类。像这样：

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

展开摘要

— 乔尔·巴尔巴（Joel Barba）
source

0

pointer-events: none;解决方案的另一种解决方案是解决输入仍可通过其标记为control或tabindex进行访问的问题，将输入包装在div中，将其样式化为禁用的文本输入，并input { visibility: hidden; }在输入为“禁用”时进行设置。
参考：https : //developer.mozilla.org/zh-CN/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

展开摘要

上面代码段中应用的禁用样式来自Chrome UI，并且在视觉上可能与其他浏览器上的禁用输入不同。可能可以使用引擎特定的CSS扩展名-prefixes为各个浏览器进行自定义。尽管乍一看，但我认为它不可能：
Microsoft CSS扩展，Mozilla CSS扩展，WebKit CSS扩展

引入附加值visibility: disabled或display: disabledappearance: disabled鉴于visibility: hidden已经影响到任何相关控制元素的适用元素的行为，什至什。

— 马修·米勒（Matthew Millar）
source