CSS を介して入力にテキストが含まれているかどうかを検出する方法はありますか? :empty疑似クラスを使用してみましたが[value=""]、どちらも機能しませんでした。これに対する単一の解決策を見つけることができないようです。
:checked、および の疑似クラスがあり:indeterminate、どちらも似たようなものであることを考えると、これは可能であるに違いないと思います。
注意: JavaScript を利用できない「スタイリッシュな」スタイルのためにこれを行っています。
また、Stylish はクライアント側で、ユーザーが制御しないページで使用されることに注意してください。
通常の CSS の注意事項と、HTML コードを変更できる場合は可能です。要素に属性を追加するrequiredと、要素は、コントロールの値が空かどうかに応じて:invalid一致します。:valid要素にvalue属性がない (または属性がvalue=""ある) 場合、コントロールの値は最初は空で、任意の文字 (スペースを含む) が入力されると空ではなくなります。
例：
<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
疑似クラス化された:validと:invalidは、ワーキング ドラフト レベルの CSS ドキュメントでのみ定義されていますが、IE を除いて、サポートはブラウザーでかなり広く行われています。
スペースのみで構成される値を「空」に含めたい場合は、属性を追加できますpattern=.*\S.*。
入力コントロールに空でない値があるかどうかを直接検出するための CSS セレクターは (現在) ないため、上記のように間接的に検出する必要があります。
一般に、CSS セレクターは、ユーザー アクションではなく、マークアップを参照するか、場合によっては、スクリプト (クライアント側 JavaScript) で設定された要素のプロパティを参照します。たとえば:empty、マークアップ内の空のコンテンツを持つ要素に一致します。この意味で、すべてのinput要素が必然的に空になります。セレクターは、要素がマークアップに属性を持ち、その値として空の文字列を持って[value=""]いるかどうかをテストします。valueそして:checkedと:indeterminateは似たようなものです。実際のユーザー入力には影響されません。
CSS がこれを行うことができないため、 Stylishはこれを行うことができません。CSS には、<input>値の (疑似) セレクターがありません。見る：
:emptyセレクターは、入力値ではなく、子ノードのみを参照します。
[value=""] 動作します。ただし初期状態のみ。これは、ノードのvalue 属性(CSS が認識する) がノードのvalue プロパティ(ユーザーまたは DOM JavaScript によって変更され、フォーム データとして送信される) と同じではないためです。
初期状態だけを気にする場合を除き、userscript または Greasemonkey スクリプトを使用する必要があります。 幸いなことに、これは難しくありません。次のスクリプトは Chrome、または Greasemonkey または Scriptish がインストールされた Firefox、またはユーザースクリプトをサポートする任意のブラウザー (IE を除くほとんどのブラウザー) で動作します。
この jsBin ページで、CSS と JavaScript ソリューションの制限のデモを参照してください。
// ==UserScript==
// @name _Dynamically style inputs based on whether they are blank.
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var inpsToMonitor = document.querySelectorAll (
"form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1; J >= 0; --J) {
inpsToMonitor[J].addEventListener ("change", adjustStyling, false);
inpsToMonitor[J].addEventListener ("keyup", adjustStyling, false);
inpsToMonitor[J].addEventListener ("focus", adjustStyling, false);
inpsToMonitor[J].addEventListener ("blur", adjustStyling, false);
inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);
//-- Initial update. note that IE support is NOT needed.
var evt = document.createEvent ("HTMLEvents");
evt.initEvent ("change", false, true);
inpsToMonitor[J].dispatchEvent (evt);
}
function adjustStyling (zEvent) {
var inpVal = zEvent.target.value;
if (inpVal && inpVal.replace (/^\s+|\s+$/g, "") )
zEvent.target.style.background = "lime";
else
zEvent.target.style.background = "inherit";
}
<input onkeyup="this.setAttribute('value', this.value);" />
と
input[value=""]
動作します ：-）
JS と CSS の使用 : 疑似クラスではない
input {
font-size: 13px;
padding: 5px;
width: 100px;
}
input[value=""] {
border: 2px solid #fa0000;
}
input:not([value=""]) {
border: 2px solid #fafa00;
}<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />
有効なセレクターがそのトリックを行います。
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
jQuery と CSS を使った簡単なトリック
JQuery:
$('input[value=""]').addClass('empty');
$('input').keyup(function(){
if( $(this).val() == ""){
$(this).addClass("empty");
}else{
$(this).removeClass("empty");
}
});
CSS:
input.empty:valid{
box-shadow: none;
background-image: none;
border: 1px solid #000;
}
input:invalid,
input:required {
box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
border: 1px solid rgb(200,0,0);
}
input:valid{
box-shadow: none;
border: 1px solid #0f0;
}
これは css では不可能です。これを実装するには、JavaScript を使用する必要があります (例: $("#input").val() == "")。