html - 我该怎么做才能让输入在这里没有样式?
问题描述
问题。我希望这里的输入元素在他为空并且不从范围内选择器中获取样式时没有任何样式,就像他是“范围内”一样...
我怎样才能做到这一点?我需要做的是输入不会在这里得到样式?这是代码:
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(251, 255, 0, 0.815);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: 'okay.';
}
input:out-of-range + label::after {
content: 'out of range!';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>Practice vsc</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul>Values between 1 and 10 are valid.
<li>
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">Your value is </label>
</li>
</ul>
</body>
</html>
解决方案
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(251, 255, 0, 0.815);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:placeholder-shown {
background-color: white;
}
input:in-range + label::after {
content: 'okay.';
}
input:out-of-range + label::after {
content: 'out of range!';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>Practice vsc</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul>Values between 1 and 10 are valid.
<li>
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">Your value is </label>
</li>
</ul>
</body>
</html>
这使用了:placeholder-shown
选择器,如此处所示。
推荐阅读
- c# - 服务器消息异步返回给客户端
- python - 从具有结构的 JSON 数组创建 2 条记录
- php - 无法使用 php 从 Microsoft Outlook 访问数据
- git - git合并后缺少文件和行
- javascript - MapQuest 的标记事件
- outlook - 是否可以限制仅 Microsoft Graph 应用程序权限?
- sql - 使用字符串从一行进行 SQL 多重连接
- sql - 如何在ssas Cube中计算前一周的最后一天和本周的最后一天?
- centos - 如何在 zpanel 中限制用户的磁盘空间?
- dictionary - 在 Ansible 中动态扩展字典变量