给定以下html:
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
可以使用以下代码来为聚焦时的输入框添加样式:
:focus
伪类
input:focus { background: green; }
有没有一种不使用JavaScript也能为给定以下html:
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
可以使用以下代码来为聚焦时的输入框添加样式:
:focus
伪类
input:focus { background: green; }
有没有一种不使用JavaScript也能为不,CSS中没有前任选择器。
input:focus -+ label { ... }
把标签放在输入框后面是可行的,这样会更好。
input:focus + label { ... }
你可以使用一些定位来显示在...
为了完整性,如果您的输入字段在标签内部,您可以使用:focus-within:
HTML:
<label>
<input name="example" type="text">
</label>
CSS:
label:focus-within {
background: #DEF;
}
更新
请确保您检查草案,因为可能会有更改:https://drafts.csswg.org/selectors-4/#relational
:has()关系伪类将允许选择父元素,例如下面的选择器只匹配包含一个 <img>
子元素的 <a>
元素:
a:has(> img)
这可以与其他选择器(例如:focus
,:active
或:not
)组合使用,提供了许多潜在的可能性。
不幸的是,在撰写本文时,浏览器的支持情况并不好:https://caniuse.com/#feat=css-has
为那些将来在这个页面中查找此信息的人添加:CSS4将具有父选择器,允许您选择要应用样式的元素:
我认为当前规范允许您使用!符号指定匹配哪个项目-主题选择器。
label! > input {
font-weight: bold;
}
这比仅使用parent提供了更大的控制能力,例如在下面这个可怕的链中,p标签是目标!
article > h1 + section > p! > b > a {
font-style: italic;
}
label[for=inputelement]:focus,
label[for=inputelement]:active {
/*styles here*/
}
label[for]:focus,
label[for]:active {
/*styles here*/
}
for
属性的标签都可以正常工作。:focus
或 :active
伪状态。 - David Thomasinput
后面跟着label
,就可以实现。input:focus + label,
input:active + label {
/* style */
}
这个想法是将输入、标签、帮助、错误等内容包装在 Flexbox 容器中。
然后使用 +
选择器来选择标签元素。
注意:仅当 <label>
在 <input>
之后时才会起作用。
然后使用 flexitem 的 order
属性定义 <label>
的顺序。
当然,您也可以使用类名。
.container {
display: flex;
flex-direction: column;
}
input {
border: none;
}
label {
order: -1;
}
input:focus {
border: 1px solid red;
}
input:focus + label{
color: red;
}
<div class="container">
<input id="username" />
<label for="username">Username</label>
</div>
当然可以。
您需要:
.parent:focus label { color: green }
您可以在我创建的jsfiddle上查看一个非常简单的示例。
<div class='workarea'>
<div class='hasinput'>
<label>Label 1 (should be green when active)</label>
<input />
</div>
<div class='hasinput'>
<label>Label 2 (should be green when active)</label>
<input />
</div>
</div>
.workarea {
max-width: 500px;
}
label,
input {
width: 100%;
}
.hasinput {
margin-bottom: 1rem;
}
.hasinput label {
color: blue;
}
.hasinput:focus-within label {
color: green;
}
:focus-within
。而且它也得到了很好的支持:https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within - Adam Marsh为您的输入按钮添加一个样式类
CSS 样式:
INPUT.book:hover, INPUT.book:focus:hover {
background-image:url(book_over.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
INPUT.book {
background-image:url(book_active.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
以及输入的HTML:
<input name="Bestil2" type="submit" class="book" value="Book møde" />
我还没有弄清楚如何避免灰色背景,即使我有一个透明的png文件,也许只需要一个jpg文件就可以了。但我希望这可以帮到你。 祝你好运 :-)
这里是使用CSS网格布局的另一种选择:
有人建议如果标签在输入框之后,那么可以使用flexbox或者在我的情况下使用CSS网格布局来先放置标签。
body {
font-family: Arial;
}
.form-field {
display: grid;
gap: 4px;
}
.form-field label {
grid-row: 1;
font-size: 12px;
color: #737373;
}
.form-field input {
outline: unset;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
border: 1px solid #737373;
}
.form-field input:focus {
border-color: #328dd2;
}
.form-field input:focus + label {
color: #328dd2;
}
<div class="form-field">
<input id="myinput" />
<label for="myinput">
My Input
</label>
</div>
如果你的目标浏览器支持flexbox,那么这是可以实现的 - 参见此链接:http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
为了简洁起见,CSS代码很少,但你需要一些特定于浏览器的前缀来扩展对较旧浏览器的支持。
display: flex
,焦点样式也能正常工作。 - Kamafeather