Làm cách nào để tắt các trường biểu mẫu bằng CSS?

Có thể vô hiệu hóa các trường mẫu bằng CSS? Tất nhiên tôi biết về thuộc tính bị vô hiệu hóa, nhưng có thể chỉ định điều này trong quy tắc CSS không? Cái gì đó như -

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

Lý do tôi hỏi là, tôi có một ứng dụng trong đó các trường biểu mẫu được tự động tạo và các trường được ẩn / hiển thị dựa trên một số quy tắc (chạy trong Javascript). Bây giờ tôi muốn mở rộng nó để hỗ trợ vô hiệu hóa / kích hoạt các trường, nhưng cách các quy tắc được viết để thao tác trực tiếp các thuộc tính kiểu của các trường biểu mẫu. Vì vậy, bây giờ tôi phải mở rộng công cụ quy tắc để thay đổi các thuộc tính cũng như kiểu của các trường biểu mẫu và bằng cách nào đó nó có vẻ ít hơn lý tưởng.

Điều rất tò mò là bạn có các thuộc tính hiển thị và hiển thị trong CSS nhưng không bật / tắt. Có bất cứ điều gì giống như nó trong tiêu chuẩn HTML5 vẫn còn hoạt động, hoặc thậm chí một cái gì đó không chuẩn (cụ thể của trình duyệt) không?

Điều này có thể hữu ích:

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

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

Cập nhật:

và nếu muốn tắt từ chỉ mục tab, bạn có thể sử dụng nó theo cách này:

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

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

Bạn có thể giả mạo hiệu ứng bị vô hiệu hóa bằng CSS.

pointer-events:none;

Bạn cũng có thể muốn thay đổi màu sắc, vv

Vì các quy tắc đang chạy trong JavaScript, tại sao không vô hiệu hóa chúng bằng cách sử dụng javascript (hoặc trong trường hợp ví dụ của tôi, jQuery)?

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

CẬP NHẬT

Các attrchức năng không còn là cách tiếp cận chính cho điều này, như đã được chỉ ra trong các ý kiến ​​dưới đây. Điều này bây giờ được thực hiện với propchức năng.

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

Điều rất tò mò là bạn có các thuộc tính hiển thị và hiển thị trong CSS nhưng không bật / tắt.

Thật tò mò khi bạn nghĩ rằng điều đó rất tò mò. Bạn đang hiểu sai mục đích của CSS. CSS không có nghĩa là thay đổi hành vi của các thành phần biểu mẫu. Nó chỉ nhằm thay đổi phong cách của họ . Ẩn trường văn bản không có nghĩa là trường văn bản không còn ở đó hoặc trình duyệt sẽ không gửi dữ liệu của nó khi bạn gửi biểu mẫu. Tất cả những gì nó làm là che giấu nó khỏi mắt người dùng.

Để thực sự vô hiệu hóa các trường của bạn, bạn phải sử dụng disabledthuộc tính trong HTML hoặc thuộc tính disabledDOM trong JavaScript.

Bạn không thể sử dụng CSS để vô hiệu hóa Textbox. giải pháp sẽ là thuộc tính HTML.

disabled="disabled"

Giải pháp thực tế là sử dụng CSS để thực sự ẩn đầu vào.

Để đưa ra kết luận tự nhiên này, bạn có thể viết hai đầu vào html cho mỗi đầu vào thực tế (một được bật và một bị tắt) và sau đó sử dụng javascript để điều khiển CSS để hiển thị và ẩn chúng.

lần đầu tiên trả lời một cái gì đó, và dường như chỉ hơi muộn ...

Tôi đồng ý thực hiện bằng javascript, nếu bạn đã sử dụng nó.

Đối với cấu trúc hỗn hợp, như tôi thường sử dụng, tôi đã tạo một giả css sau phần tử để chặn các phần tử khỏi sự tương tác của người dùng và cho phép tạo kiểu mà không phải thao tác trên toàn bộ cấu trúc.

Ví dụ:

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

Tôi có thể đặt một disabledlớp trên bao bìdiv

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

Điều này sẽ làm xám văn bản trong divvà làm cho nó không sử dụng được cho người dùng.

Ví dụ của tôi

Tôi luôn luôn sử dụng:

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

và sau đó áp dụng lớp css cho trường đầu vào:

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

đầu vào [tên = tên người dùng] {bị vô hiệu hóa: đúng; /* Không hoạt động */ }

Tôi biết câu hỏi này khá cũ nhưng đối với những người dùng khác gặp phải vấn đề này, tôi cho rằng cách dễ nhất để vô hiệu hóa đầu vào chỉ đơn giản là ': tật'

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

Trong thực tế, nếu bạn có một số tập lệnh để vô hiệu hóa đầu vào / tự động với javascript hoặc jquery sẽ tự động vô hiệu hóa dựa trên điều kiện bạn thêm.

Trong jQuery ví dụ:

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

Hy vọng câu trả lời trong CSS sẽ giúp.

Bạn không thể làm điều đó tôi sợ, nhưng bạn có thể làm như sau trong jQuery, nếu bạn không muốn thêm các thuộc tính vào các trường. Chỉ cần đặt nó trong <head></head>thẻ của bạn

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

Nếu bạn đang tạo các trường trong DOM (với JS), bạn nên thực hiện việc này thay thế:

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

Điều này có thể được thực hiện cho mục đích không quan trọng bằng cách đặt lớp phủ lên trên phần tử đầu vào của bạn. Đây là ví dụ của tôi trong HTML và CSS thuần túy.

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>

Không có cách nào để sử dụng CSS cho mục đích này. Lời khuyên của tôi là bao gồm một mã javascript nơi bạn gán hoặc thay đổi lớp css được áp dụng cho các đầu vào. Một cái gì đó như thế:

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>

Một biến thể của pointer-events: none;giải pháp, giải quyết vấn đề đầu vào vẫn có thể truy cập được thông qua điều khiển được gắn nhãn hoặc tabindex, là bọc đầu vào trong div, được đặt kiểu là đầu vào văn bản bị vô hiệu hóa và cài đặt input { visibility: hidden; }khi đầu vào bị "vô hiệu hóa" .
Tham chiếu: https://developer.mozilla.org/en-US/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>

Kiểu bị tắt được áp dụng trong đoạn trích ở trên được lấy từ Giao diện người dùng Chrome và có thể không giống hệt với các đầu vào bị vô hiệu hóa trên các trình duyệt khác. Có thể nó có thể được tùy chỉnh cho các trình duyệt riêng lẻ bằng cách sử dụng phần mở rộng CSS dành riêng cho động cơ. Mặc dù nhìn thoáng qua, tôi không nghĩ nó có thể:
tiện ích mở rộng CSS của Microsoft , tiện ích mở rộng CSS của Mozilla , tiện ích mở rộng CSS của WebKit

Có vẻ hợp lý hơn nhiều khi giới thiệu một giá trị bổ sung visibility: disabledhoặc display: disabledthậm chí appearance: disabled, thậm chí , được cho là visibility: hiddenđã ảnh hưởng đến hành vi của các yếu tố áp dụng bất kỳ yếu tố kiểm soát liên quan nào.