使用CSS检测输入中是否包含文本-我正在访问的页面上不受控制吗？

是否可以通过CSS检测输入中是否包含文本？我试过使用:empty伪类，并且试过使用[value=""]，这两种都不起作用。我似乎找不到单个解决方案。

考虑到我们有:checked和和的伪类，我想这一定是有可能的，:indeterminate两者都是相似的。

请注意：我这样做是为了“时尚”风格，无法利用JavaScript。

另请注意，在用户无法控制的页面上，客户端使用了时尚样式。

时尚无法做到这一点，因为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";
}

通常的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有类似的事情。它们不受实际用户输入的影响。

您可以使用: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=" " />

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

和

input[value=""]

将工作 ：-）

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

基本上每个人都在寻找：

减：

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

您可以使用placeholder上面没有写的技巧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

简单的CSS：

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

如果输入被填满，此代码将在页面加载时应用给定的CSS。

您可以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

使用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
}

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

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

使用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;
    }

在HTML部分执行以下操作：

<input type="text" name="Example" placeholder="Example" required/>

必需的参数将要求它在输入字段中具有文本才能生效。

是! 您可以使用带有值选择器的简单基本属性来完成此操作。

将属性选择器与空白值一起使用并应用属性 input[value='']

input[value=''] {
    background: red;
}

CSS无法做到这一点。要实现这一点，您将必须使用JavaScript（例如$("#input").val() == ""）。