1. ホーム
  2. ハイパーリンク

[解決済み】CSSを使用してフォームフィールドを無効にするにはどうすればよいですか?

2022-04-07 12:14:21

質問

CSSでフォームフィールドを無効にすることは可能ですか?disabledという属性はもちろん知っているのですが、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のプロパティがあるのに、enable/disableがないのは非常に不思議です。まだ策定中のHTML5規格にそのようなものがあるのか、あるいは非標準(ブラウザ固有)のものがあるのでしょうか?

解決方法は?

参考になることがあります。

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