Я пытаюсь иметь некоторые входные файлы, и они отображаются только в том случае, если предыдущий был заполнен. Это также может использовать css 3.
Есть ли селектор CSS для определения того, выбран ли вход текстового файла?
Ответ 1
Чтобы развернуть комментарий Yi Jiang, селекторы против атрибута "value" не заметят изменений в свойстве "значение" . Атрибут "value" привязан к свойству "defaultValue" , а Свойство "значение" не привязано к какому-либо атрибуту (спасибо porneL за указание этого).
Обратите внимание, что существует аналогичная связь с атрибутом checked и defaultChecked "и" checked "свойства; если вы используете селектор атрибутов [checked], а не псевдокласс :checked, вы не увидите изменения стиля при изменении состояния флажка. В отличие от" проверенного" семейства, "значение" не имеет соответствующего псевдокласса, который вы могли бы использовать.
Попробуйте следующую тестовую страницу:
<!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 с атрибутом "value", поэтому обновление первого с пользовательского ввода будет распространяться на последнее (программная установка свойства "value" не приведет к событию изменения).
При изучении свойств JS входов файлов до и после (с использованием следующего script) единственным значением с заметным изменением было "значение" . Исходя из этого, я сомневаюсь, что есть другие атрибуты 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 могут обрабатывать все ссылки как невидимые ссылки или реализовывать другие меры, чтобы сохранить конфиденциальность пользователя во время просмотра посещенных и незатронутых ссылок по-разному.
Возможно, вы сможете взломать что-то вместе с помощью других селекторов на других элементах, но я подозреваю, что это невозможно сделать чисто.
Ответ 2
Пример, стоящий тысячи слов: Отображать вход X по одному за раз
Идея проста, если набор ввода по необходимости пуст, он недействителен. Оттуда все, что вам нужно сделать, это установить все необходимые данные и использовать недопустимый псевдокласс. Должен отлично работать с ярлыком.
Ответ 3
Чтобы выбрать пустые поля, вы можете попробовать
input[type=file][value=""] {
background-color: red;
}
Я тестировал его на jsfiddle. Там, по крайней мере, мне нужно было определить пустой атрибут значения для входного тега, чтобы он работал
<input type="file" id="test" value="">
Использование оператора '+', как вы делали в вашем примере, будет соответствовать двум отдельным входам файлов, один за другим. Он не проверяет два атрибута одного и того же тега, который вам кажется нужным.