使用CSS检测输入中是否有文本 - 在我正在访问的页面上并且无法控制？

Question

有没有办法通过CSS检测输入中是否有文本？我已经尝试过使用:empty伪类,我尝试过使用[value=""],但两者都没有用.我似乎无法找到一个解决方案.

我想这一定是可能的,考虑到我们有伪类:checked,并且:indeterminate两者都是类似的东西.

请注意:我这样做的是"时尚"风格,无法使用JavaScript.

另请注意,在用户无法控制的页面上使用Stylish,客户端.

Answer 1

有可能,通常的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中,它与IE 10一起提供.

如果您想使"空"包含仅包含空格的值,则可以添加该属性pattern=.*\S.*.

(当前)没有用于直接检测输入控件是否具有非空值的CSS选择器,因此我们需要间接地执行它,如上所述.

通常,CSS选择器引用标记,或者在某些情况下,引用通过脚本(客户端JavaScript)设置的元素属性,而不是用户操作.例如,:empty匹配标记中包含空内容的元素; input在这个意义上,所有元素都是不可避免的空洞.选择器[value=""]测试元素是否具有value标记中的属性并将空字符串作为其值.而且:checked和:indeterminate有类似的事情.它们不受实际用户输入的影响.

Answer 2

您可以使用:placeholder-shown伪类.从技术上讲,需要占位符,但您可以使用空格.

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

Answer 3

时尚不能这样做因为CSS无法做到这一点. CSS没有<input>值(伪)选择器.看到:

• W3C选择器规格
• Mozilla/Firefox支持的选择器
• 跨浏览器,CSS3支持表

在: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";
}

Answer 4

<input onkeyup="this.setAttribute('value', this.value);" />

和

input[value=""]

将工作 :-)

编辑:http://jsfiddle.net/XwZR2/

Answer 5

您可以利用占位符并使用：

input:not(:placeholder-shown) {
  border: 1px solid red;
}

Answer 6

使用属性placeholder和伪类placeholder-shown是检测输入是否包含文本的正确方法。

例子：

<input type="email" placeholder=" " required>
<label>Email</label>

input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
  top : -4em
  left : -0.2em
  font-size : 0.9em
}

Answer 7

基本上每个人都在寻找的是:

减:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

纯CSS:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

Answer 8

您可以使用placeholder上面w / o required字段中所写的技巧。

问题required在于，当您编写某些内容然后将其删除时，作为HTML5规范的一部分，输入现在始终为红色-然后，您将需要如上所述的CSS来修复/覆盖它。

您可以简单地做不做的事情 required

<input type="text" placeholder="filter here" id="mytest" />

的CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

密码笔：https : //codepen.io/arlevi/pen/LBgXjZ

Answer 9

实际上有一种方法可以在没有 JavaScript 的情况下做到这一点。

如果将 an<input>的required选择器设置为 true，则可以检查其中是否有带有 CSS:valid标记的文本。

参考：

MDN 文档
CSS 技巧

input {
  background: red;
}

input:valid {
  background: lightgreen;
}

<input type="text" required>

Answer 10

input[type=text]根据输入是否具有通过设置占位符样式的文本,您可以设置不同的样式.这不是官方标准,但具有广泛的浏览器支持,但具有不同的前缀:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

示例:http://fiddlesalad.com/scss/input-placeholder-css

Answer 11

简单的CSS：

input[value]:not([value=""])

如果输入已填满，此代码将应用给定的CSS。

Answer 12

使用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="" />