[解決済み] CSSを使用してフォームフィールドを無効にするにはどうすればよいですか?
2022-03-07 23:35:39
質問
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>
関連
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み】#記号のHTML文字実体は何ですか?
-
[解決済み] 絶対位置が機能しない
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] 必要なキーに一致するルートがありません。[:id]
-
[解決済み] 電話番号のマークアップはどのように行うのですか?