Search code examples
htmlcssmaterialize

difficulty changing the focus on the text box by materialize

With the focus in check and the label moving to the top, I can't find where this css is being changes, and how to take control over it.

The real focus here is this 

<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>

In chrome inspection I thought this might work 

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid black !important;
}

but alas it did not, and frustrated spending more time than I should. I am here.

Here is the whole html snippet

<!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>

the 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
}

Here is a jsFiddle. The issue is when you click the text box, that highlighted greenish line is the one I'm trying to target. In inspection I couldn't seem to figure it out.

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

Solution

  • Your selector is correct. The only thing is that you also need to add this to your code:

    "box-shadow: none !important;"

    There is also a green box shadow being applied. If you prefer to make it black but similar to the material one, you can always increase the border width from 1 to 2px.

    As a note, the label is moving because there is a class being dynamically applied to it (also to the icon) when we have focus on the input ("active").