Hey there, I'm facing an issue with overriding the background color of a material element. I've tried several methods but can't seem to get it to change.
After inspecting the element on the web browser, I found the CSS code that controls the color I want to change:
.form-control-wrapper .material-input::before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: #009587;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 0s;
transition: transform 0s;}
I've attempted to modify this code without success, as the material color remains unchanged. Any suggestions or ideas would be greatly appreciated. Thank you!
In addition, let's add some more content:
<span class="material-input"></span>The above code snippet contains both before and after events, with the 'before' section responsible for the background color.
Here is the HTML structure calling the CSS material:
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="input-group">
<span class="input-group-addon"><span id="icon" class="mdi mdi-social-person"></span></span>
<input name="message" id="message" type="text" class="form-control" placeholder="Choose an username" aria-describedby="basic-addon1" maxlength="768">
<span class="input-group-btn">
<button id="send" class="btn btn-primary btn-flat">Connect</button>
</span>
</div>
</div>
</div>