是否有一个CSS选择器来检测输入是否有选定的文本文件？

0

要选择空字段，你可以尝试

input[type=file][value=""] { 
    background-color: red; 
}

我测试的jsfiddle。有至少，我需要输入标签定义一个空值属性，它的工作

<input type="file" id="test" value="">

使用“+”操作符与您在您的例子做会匹配两个单独的文件输入，一个向右之后。它不会检查您看起来想要的相同标记的两个属性。

来源

2010-11-13 22:37:52

+1

我想要的只是首先显示1个输入，然后一旦有一个文件被选中，显示第二个，依此类推。我测试了你的建议，一旦文件被选中，它就不会改变。它只查看“value”属性的初始值，当它改变时什么都不做。 – manixrock 2010-11-13 23:57:09

+0

@manixrock CSS不能像这样使用 - 选择器只在加载页面时评估一次，就是这样。您需要使用Javascript才能做到这一点 – 2010-11-14 00:15:04

+1

@Yi Jiang - 这不是真的：'input {margin-left：10px; } input：checked {margin-left：20px; }';添加一个复选框的输入，当你检查它会移动到右侧;取消选中它，它会移动到左侧;这证明css是在运行时在页面上进行评估的，而不仅仅是在加载时。我正在寻找这样的东西，但适合文件输入。 – manixrock 2010-11-14 00:23:43

6

要扩展Yi Jiang的评论，针对“value”属性的选择器不会注意到“value”属性的更改。 “价值”属性绑定到"defaultValue" property，而"value" property没有绑定到任何属性（感谢porneL指出了这一点）。

请注意，与“checked”属性和“defaultChecked”和“checked”属性有类似的关系;如果您使用属性选择器[checked]而不是伪类:checked，则当复选框的状态更改时，您将看不到样式更改。与“checked”系列不同，“value”没有相应的伪类，您可以使用它。

尝试以下测试页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title>Dynamic attribute selectors</title> 
    <style type="text/css"> 
    input:not([value]), div:not([value]) { 
     background-color: #F88; 
    } 

    input[value], div[value] { 
     border: 5px solid #8F8; 
    } 
    input[value=""], div[value=""] { 
     border: 5px solid #F8F; 
    } 

    input:not([value=""]), div:not([value=""]) { 
     color: blue; 
     border-style: dashed; 
    } 

    *.big { 
     font-size: 200%; 
    } 
    </style> 
    <script> 
     function getElt() { 
      var id=prompt("Enter ID of element", "d1"); 
      if (id) { 
       return document.getElementById(id); 
      } else { 
       return {className: ''}; 
      } 
     } 

     function embiggen() { 
      getElt().className="big"; 
      return false; 
     } 

     function smallify() { 
      getElt().className=""; 
      return false; 
     } 
    </script> 
    </head> 

    <body> 
    <form method="post" enctype="multipart/form-data"> 
     <div id="d1">no value</div> 
     <div id="d2" value="">empty value</div> 
     <div id="d3" value="some">some value</div> 
     <p><label for="foo">foo:</label> <input name="foo" id="foo" /></p> 
     <p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p> 
     <p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p> 
     <input type="button" value="Embiggen" onclick="return embiggen()" /> 
     <input type="button" value="Smallify" onclick="return smallify()" /> 
    </body> 
</html>

改变任何事物的价值和风格不会改变。改变任何东西的类，风格会改变。如果添加以下JS函数并将其绑定到输入上的更改事件，背景样式将会更改。

 function bindValue(elt) { 
      var oldVal=elt.getAttribute('value'); 
      elt.setAttribute('value', elt.value); 
      var newVal=elt.getAttribute('value'); 
      if (oldVal != newVal) { 
       alert('Had to change value from "'+oldVal+'" to "'+newVal+'"'); 
      } 
     }

此结合“值”属性设置为“value”属性，所以更新前者通过用户输入将传播到后者（编程设置“值”属性不会导致改变事件）。

在检查文件输入前后的JS属性（通过使用下面的脚本）时，唯一有可改变的是“value”。从这个角度来看，我怀疑是否有其他的HTML属性会发生变化，因此可以在属性选择器中使用。

<script> 
    var file = {blank: {}, diff: {}}; 
    var fInput = document.getElementById('file'); 
    for (p in fInput) { 
    try { 
     file.blank[p] = fInput[p]; 
    } catch (err) { 
     file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";   
    } 
    } 

    function fileDiff() { 
    for (p in fInput) { 
     try { 
     if (file.blank[p] != fInput[p]) { 
      file.diff[p] = {orig: file.blank[p], now: fInput[p]}; 
     } 
     } catch (err) { 
     //file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";   
     } 
    } 

    } 

    if (fInput.addEventListener) { 
    fInput.addEventListener('change', fileDiff, false); 
    } else if (fInput.attachEvent) { 
    fInput.attachEvent('onchange', fileDiff); 
    } else { 
    fInput.onchange = fileDiff; 
    } 
</script>

您可以通过链接到一个不存在的片段和:visited伪类一起下锅的东西，但它是非常令人震惊的。

<style> 
a input { 
    display: none; 
} 
:not(a) + a input, 
a:visited + a input 
{ 
    display: block /* or "inline" */ ; 
} 

</style> 
... 
<a href="#asuhacrpbt"><input type="file" ... /></a> 
<a href="#cmupbnhhpw"><input type="file" ... /></a> 
<a href="#mcltahcrlh"><input type="file" ... /></a>

您需要在每次加载页面时为链接生成未访问的目标。由于您必须在服务器端进行此操作，因此您无法完全确定这一点，尽管您可能会将产生之前访问的目标的概率任意接近0.它也不适用于所有浏览器，例如苹果浏览器。我怀疑这是由于从CSS2和CSS3如下：

注：这是可能的样式表作者滥用：link和：visited伪类，以确定用户未经用户访问了哪些网站同意。

因此，UA可能会将所有链接视为未访问链接，或实施其他措施以保护用户隐私，同时呈现不同访问和未访问链接。

您可能能够使用其他元素上的其他选择器来破解一些东西，但我怀疑这不能干净地完成。

来源

2010-11-14 01:28:31 outis

+6

澄清：匹配'value'属性*的选择符总是在'value' *属性*改变时动态地重新评估，并且它支持所有支持CSS2选择器的浏览器。 CSS在这里不会例外。令人困惑的部分是''value * *属性*'**未更新**以响应''的变化。 'value' * attribute *映射到'defaultValue' DOM * property *，'value' * property *没有相应的DOM *属性*。 JS和HTML/CSS是两个不同的世界。 – Kornel 2010-11-14 16:55:59

+1

那么，如果'defaultValue'通过JavaScript更新（简化jQuery）：'jQuery（'input [type = file]'）.change（function（e）{this.defaultValue = this.value;}） ;' – feeela 2012-09-26 18:55:46

6

一个例子值得十万字：Display X input, one at a time

的想法很简单，如果根据需要设置的输入是空的，它是无效的。从那里，你所要做的就是根据需要设置所有输入，并使用：无效伪类。应该与标签一起工作。

来源

2012-08-22 21:28:56 gkr

+0

哦，不可思议！ – 2013-02-20 14:54:43

+0

这个缺点是你需要填充所有的输入，这使得它不可行，它不是真正的动态，据我研究，这是不能完全实现没有JS – aleation 2013-07-29 14:42:56

+0

添加novalidate到表单标签允许发送表单与空输入。不知道它是否值得。无论如何，动态的输入数量是无法实现的。 – gkr 2013-07-30 10:52:54

是否有一个CSS选择器来检测输入是否有选定的文本文件？

回答

相关问题