Question

在检查焦点并将标签移到顶部的情况下，我无法找到此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>

在镀铬检查中，我认为这可能有效

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。问题是当您单击文本框时，突出显示的 greenish 行是我要定位的行。在检查中，我似乎无法弄清楚。

https://jsfiddle.net/robstao/b1goj7q2/3/

Answer 1

您的选择器正确。唯一的是，您还需要将其添加到您的代码中：

“盒子阴影：无！重要；”

还应用了一个绿色框阴影。如果您希望将其设置为黑色但与材质类似，则可以始终将边框宽度从1px增加到2px。

请注意，标签之所以移动，是因为当我们专注于输入（“活动”）时，动态地将一个类应用于它（也应用于图标）。

Answer 2

您有几种方法可以执行此任务。建议一些，一些很容易搭配。

1：您可以转到materialize.css文件并检查第13行，这样您将在下面找到代码

input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #26a69a;
-webkit-box-shadow: 0 1px 0 0 #26a69a;
box-shadow: 0 1px 0 0 #26a69a;

}

将颜色值更改为网站的原色。

注意：您还会在实现css文件的顶部找到其他许多全局css代码。尝试非最低版本。

2：如果您愿意，可以超越实现CSS代码。下面的例子

input {
border-bottom: none !important;
box-shadow: none !important;
}

3：您可以采用最推荐的方法来重新编译实现css的sass文件并在其中更改值。您会发现变量here

https://jsfiddle.net/bilalkhan891/bf0jtqLk/1/

难以通过实现来改变对文本框的关注

2 个答案: