Text Inputs

  1. CSS
  2. Changing the colour

Each input should have a unique ID be followed by a label with a matching for attribute. Wrapping these two elements in a div with a class of input-field gives the correct spacing (margin) to allow for the animated label, which moves up when the element is focused.

<div class="row">
   <div class="input-field col s12">
      <input id="first_name" type="text" class="validate">
      <label for="first_name">First Name</label>
   </div>
</div>
Style

If you need to change the colours or spacing, you can either do so at the root level by using Sass, or in your css file by targeting the classes below. Here we list all the styles are that applied to both the input and the label.

// For the input

input[type=text]:not(.browser-default) {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: box-shadow 0.3s,border 0.3s;
}

// For the label

.input-field.col label {
    left: 0.75rem;
}

.input-field>label {
    color: #9e9e9e;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    cursor: text;
    transition: transform 0.2s ease-out,color 0.2s ease-out;
    transform-origin: 0% 100%;
    text-align: initial;
    transform: translateY(12px);
}

input[type=text]:not(.browser-default).validate+label {
    width: 100%;
}

When you focus an input (ie click into it) two things happen. The label gets an active class and the input changes colour due to the focus:

// border width and colour of the input

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
}

// text colour of the label

input[type=text]:not(.browser-default):focus:not([readonly])+label {
    color: #26a69a;
}

// position of the label

.input-field>label:not(.label-icon).active {
    transform: translateY(-14px) scale(0.8);
    transform-origin: 0 0;
}
Changing the color

To change the focus colour of the input you can apply the following style:

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid firebrick;
    box-shadow: 0 1px 0 0 firebrick;
}

input[type=text]:not(.browser-default):focus:not([readonly])+label {
    color: firebrick;
}
Footnote

You can apply the css above to any of the inputs, the full list of which is below:

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
// custom styles go here
}
Suggest an edit

If you think this page contains an error or could be improved - or you have a suggestion for a new article, drop me a message!

Spread the love