时间戳

首页 > 解决方案 > 难以通过具体化改变文本框的焦点

html - 难以通过具体化改变文本框的焦点

问题描述

随着焦点的检查和标签移动到顶部，我找不到这个 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。问题是当您单击文本框时，突出显示的绿色线是我试图定位的那条线。在检查中，我似乎无法弄清楚。

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

标签： htmlcssmaterialize

解决方案

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

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

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

请注意，标签正在移动，因为当我们关注输入（“活动”）时，有一个类被动态应用于它（也应用于图标）。

推荐阅读