随着选中焦点和标签移动到顶部，我无法找到此 css 的更改位置以及如何控制它。
这里真正的重点是这个
<div class="input-field col s6">
<i class="material-icons prefix ">account_circle</i>
<input id="icon_prefix" type="text" class="validate"
</input>
<label for="icon_prefix">Character Name</label>
</div>
在 chrome 检查中，我认为这可能有效
input[type=text]:not(.browser-default):focus:not([readonly]) {
border-bottom: 1px solid black !important;
}
但遗憾的是，它并没有，并且沮丧地花费了比我应该的更多的时间。我在这里。
这是整个 html 片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Input Change</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div id="root">
<div class="input-field col s6">
<i class="material-icons prefix ">account_circle</i>
<input id="icon_prefix" type="text" class="validate ">
</input>
<label for="icon_prefix">Character Name</label>
</div>
</div>
</body>
</html>
CSS
/* https://materializecss.com/text-inputs.html */
/* label focus color */
.input-field input:focus + label {
color: black !important;
/* border-bottom: 1px solid red !important; */
}
#icon_prefix {
/* border-bottom: 1px solid red !important; */
/* box-shadow: 0 1px 0 0 red !important */
}
.active {
color: black !important;
}
.validate{
/* border-bottom: red !important; */
/* border-bottom: 1px solid red !important; */
}
/* label underline focus color */
.row .input-field input:focus {
border-bottom: 1px solid black !important;
box-shadow: 0 1px 0 0 black !important
}
这是一个 jsFiddle。问题是当您单击文本框时，突出显示的绿色 行就是我要定位的行。在检查中，我似乎无法弄清楚。
最佳答案
您的选择器是正确的。唯一的问题是您还需要将此添加到您的代码中:
“盒子阴影:无!重要；”
还有一个正在应用的绿色框阴影。如果您更喜欢将其设为黑色但与 Material 相似，您始终可以将边框宽度从 1 增加到 2 像素。
请注意，标签在移动，因为当我们关注输入(“事件”)时，有一个动态应用于它的类(也应用于图标)。
关于html - 难以通过物化改变文本框上的焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54610625/