CSSを使用してフォームフィールドを無効にするにはどうすればよいですか？

180

CSSを使用してフォームフィールドを無効にすることはできますか？もちろん無効な属性について知っていますが、CSSルールでこれを指定することはできますか？何かのようなもの -

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

私が尋ねている理由は、フォームフィールドが自動生成され、いくつかのルール（JavaScriptで実行される）に基づいてフィールドが非表示/表示されるアプリケーションがあるためです。次に、フィールドの無効化/有効化をサポートするように拡張したいのですが、フォームフィールドのスタイルプロパティを直接操作するためのルールの記述方法です。そこで、ルールエンジンを拡張して、属性とフォームフィールドのスタイルを変更する必要があり、どういうわけかそれは理想的ではないようです。

CSSに可視と表示のプロパティがあるが、有効化/無効化していないことは非常に奇妙です。まだ機能していないHTML5標準、または非標準（ブラウザー固有）のようなものはありますか？

html css

— アヌパムジャイナ
ソース

5

以下で何度か言及されていますが、ノイズの中で失われています。ポインターイベントを試してください：なし。

— Corey Alix 2016

89

これは役に立ちます：

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

— フェレイドゥーン・バリツェヒ
ソース

3

入力フィールドをすべて無効にした後のように見えましたが、マウスイベントからブロックされますが、キーボードタブを使用してアクセスおよび変更できます

— Ken

11

tab-index cssプロパティが存在しません。HTML属性である必要があります（tabindex = -1）

— N4ppeL

1

tab-indexが見つからず、Chromeで機能せず、TABキーを押すと、無効化機能が無効になるため、これは完全なソリューションではありません。

— QMasterは

172

CSSを使用して無効化された効果を偽ることができます。

pointer-events:none;

また、色などを変更したい場合もあります。

— アナイミ
ソース

68

これは役立ちますが、フィールドへのタブ移動を妨げません。

— jerwood 2014

私はブレッドクラムの最後のリンクを「無効」にしたかったのですが、この回避策を心に留めていませんでした...これにいくつかの色の変更と下線なしのおかげで、トリックを作りました！：D

— Facundo Colombier 2015

2

これにより、フォームの値の送信が妨げられることもありません。

— Ken Wayne VanderLinde 2017

1

@KenWayneVanderLinde無効属性も正しくありませんか？

— theonlygusti

2

@theonlygusti無効なフォームの<input>要素は送信されません。

— dougd_in_nc 2018年

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
ソース

1

$（ '＃filedId'）。removeAttr（ 'disabled'）;であってはなりません。//有効にする

— Anupam Jain

6

ユーザーがJavaScriptを無効にしている場合、このソリューションは機能しないことに注意してください。

— josh-fuggle 2013

1

Firefox 20.0（他のバージョンについては不明、これは私が開発に使用しているものにすぎません）では、属性を削除する必要があります。@ Dutchie432は理論的には正しいですが、.removeAttr（ 'disabled'）;を使用します。（少なくとも私の現在のブラウザでは）正しい実際的な解決策です。

1

JQueryを使用できない場合を除きます。

— 海兵隊

3

FYI-jQueryのドキュメント.prop()では.attr()、このケースの代わりにを使用することを推奨しています。「jQuery 1.6以降では、設定されていない属性に対して.attr（）メソッドがundefinedを返します。フォーム要素のチェック済み、選択済み、無効状態などのDOMプロパティを取得して変更するには、.prop（）メソッドを使用します。」ソースドキュメント：.attr（）および.prop（）

— Nicholas Ryan Bowers

54

CSSに可視と表示のプロパティがあるが、有効化/無効化していないことは非常に奇妙です。

あなたがそれを非常に好奇心が強いと思うことは非常に好奇心が強いです。CSSの目的を誤解している。CSSはフォーム要素の動作を変更するためのものではありません。彼らのスタイルだけを変えるつもりです。テキストフィールドを非表示にしても、テキストフィールドがなくなったり、フォームを送信したときにブラウザがデータを送信しなかったりするわけではありません。ユーザーの目から隠すだけです。

フィールドを実際に無効にするには、HTML の属性またはJavaScriptのDOMプロパティを使用する必要があります。disableddisabled

— ボルトクロック
ソース

35

もちろん、私はCSSが何のためにあるのかを知っています。しかし、現代のWebアプリケーションの場合、「プレゼンテーション」と「動作」の区別は泥よりも曖昧です。無効化されたフィールドはサーバーに送信されないため、これは動作の変更です。しかし、どのようにすべてのフォームフィールドを1つではなく非表示にするのですか？おそらく、Webでできることはテキストを読んでフォームに入力するだけだった古き良き時代には、その区別はより明確でした。最新のWebアプリでは、プレゼンテーションを動作から分離したい場合、CSS対HTML / JSはそれを行うための間違った方法です。

— Anupam Jain、

17

無効は動作ではなく状態です。彼が求めていることは完全に合理的です。たとえば、データの処理中に、ビジークラスを複数のフィールドに追加することができます。さらに、無効にされた疑似クラスを介してCSSが要素を選択できるため、W3Cは同意するようです。

— IAmNaN 2013

3

@IAmNaN：1）「無効は動作ではなく状態です。」他のすべてのHTML / DOM属性も同様です。2）「たとえば、データの処理中に複数のフィールドにビジークラスを追加することができます。」スクリプトでそれを行います。3）「さらに、無効にされた疑似クラスを介してCSSで要素を選択できるため、W3Cは同意するようです。」有効か無効かに基づいて要素を選択できることは、CSSを使用してその状態を変更できることとは関係ありません。

— BoltClock

5

CSSには、実際には動作の変化と見なすことができる多くのものがあります。例えば、pointer-events：none; @ANaimiが言及しました。したがって、無効にされていることも、表示プロパティと簡単に見なすことができます。悪くはありませんが、いくつかのことは簡単になります。

— MikaelLepistö2014

1

@MikaelLepistö：ええ、pointer-eventsCSSプロパティであることにも同意しません。FYI、pointer-events SVGに由来します。

— BoltClock

22

CSSを使用してTextboxを無効にすることはできません。ソリューションはHTML属性になります。

disabled="disabled"

— ヴィシュワナート・ダルビ
ソース

これは原理的には機能しますが、質問全体を読むと、フォームフィールドが自動生成されているため、後で無効にする必要があることがわかります。

— thelem 2014

1

@mr_eclair。---> pointer-events：noneを使用して可能です。Cssプロパティ。

— Fereydoon Barikzehy

3

注：disabled属性を持つ要素は送信されません -その値はサーバーに送信されません。続きを読む：stackoverflow.com/q/8925716/1066234

— Kai Noack

17

実際的な解決策は、CSSを使用して実際に入力を非表示にすることです。

これを自然な結論に導くために、実際の入力ごとに2つのHTML入力（1つは有効、もう1つは無効）を記述し、JavaScriptを使用してCSSを制御してそれらを表示および非表示にすることができます。

— グラフィック
ソース

3

Javascriptを使用している場合、必要に応じて無効化/有効化するだけでも意味がありますか？

— MindVox 2016

確かに、しかしこの特定の質問の文脈では、これは実行可能なアプローチかもしれません。

— graphicdivine

10

初めて何かに答えて、一見少し遅れているようです...

すでに使用している場合は、javascriptを使用することに同意します。

複合構造の場合、通常使用するように、CSSの疑似after要素を作成して、ユーザーの操作から要素をブロックし、構造全体を操作せずにスタイルを設定できるようにしました。

例えば：

<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

— ラーキー
ソース

4

ところで、ユーザーがフィールドにアクセスして変更できるようにするタブ操作を処理する必要があります。

— Kキンブル2013年

2

<select>にclass = "disabled"を指定しないでください。

— TimoSolo 2013年

これは素晴らしいです。私はこのようなものがあることを知っていました。:)ありがとう

— James Harrington

これは本当に便利です。JavaScriptを使用して無効に設定することをお勧めしますが、これにより、（エラーメッセージに加えて）送信が機能しないことをユーザーに明らかにするという私の問題が解決されます。

— jerclarke

8

私は常に使用しています：

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

次に、CSSクラスを入力フィールドに適用します。

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

— カイ・ノアック
ソース

4

input [name = username] {無効：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の答えが役に立てば幸いです。

— シェイズ
ソース

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
ソース

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>

— DeFeNdog
ソース

1

この目的でCSSを使用する方法はありません。私のアドバイスは、入力に適用されるcssクラスを割り当てまたは変更するJavaScriptコードを含めることです。そんな感じ：

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>

スニペットを展開

— ジョエル・バルバ
ソース

0

pointer-events: none;ソリューションのバリエーションは、ラベル付きのコントロールまたはtabindexを介して引き続きアクセスできる入力の問題を解決し、無効なテキスト入力としてスタイルが設定されているdivで入力をラップしinput { visibility: hidden; }、入力が「無効」であるときに設定することです。。
参照：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>

スニペットを展開

上記のスニペットに適用されている無効化されたスタイルはChrome UIから取得されたものであり、他のブラウザーの無効化された入力と視覚的に同一ではない場合があります。おそらく、エンジン固有のCSS拡張-prefixesを使用して、個々のブラウザー用にカスタマイズできます。一見しただけではそうは思いません
。MicrosoftCSS拡張、Mozilla CSS拡張、WebKit CSS拡張

それははるかに賢明な付加価値をご紹介しているように見えるでしょうvisibility: disabledかdisplay: disabled偶数か、おそらくappearance: disabledことを考えると、visibility: hiddenすでに影響行動任意の制御要素を関連する該当の要素を。

— マシュー・ミラー
ソース