At the moment, the textfield in my HTML file is blue. Is there a way to make it red instead? Thanks.
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Textfield Demo</title>
<!-- Import MDL libraries -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell--10-col" style="text-align:center; height:60vh">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="search-bar">
<label class="mdl-textfield__label" for="search-bar">Text...</label>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
</div>
</main>
</div>
</body>
</html>
update your CSS as below,