Update the text color of user-input content in an input field using Material Design Lite in HTML

When designing an application, I've chosen to have a black background for one of the pages. However, when users type in the input box, their text ends up being black as well, making it invisible.

<head>
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
            <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
            <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
        </head>

        <body>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" name="Username"/>
                <label class="mdl-textfield__label" style="color:#b272a9;" for="Username">Username</label>
            </div>

        </body>

Is there a way to change the color of the input text in Material Design Lite (MDL)?

htmlcssmaterial-design

Answer №1

Kindly exclude the style="color:#b272a9;" attribute

Answer №2

Here is a little trick for you: I have replicated your conditions and everything initially appears black.

Check out the code here!

This is what I did:

input{
background:black;
color:silver !important;
border:1px white solid !important;
}

Remember, when dealing with CMS platforms, sometimes using the !important rule is necessary to avoid chaos:-)

Answer №3

To change the color of the text in an input field, you can specify a color using the style attribute

<input type="text" style="color:red">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a numerical function into an HTML span tag: A quick guide

Looking for assistance with updating the last line. The goal is to display the current month, obtained from the getMonthText variable, within the <h1><span id="month_year">&nbsp;</span></h1> Starting code. The issue arises to ...

javascriptjqueryhtml

Learning how to utilize various types of buttons in C# and ASP.NET with this

I was following this tutorial: I like everything the same except I want to make the following change: <section> <a rel="external" href="#button" id="button">&#xF011;</a> <span></span> </section> ...

c#jquerycssasp.net

I'm trying to create a customer slider using the codes provided, but unfortunately, I'm encountering some issues

I'm having trouble creating a slider that pulls all slider data from the database. Here are my codes, but the output is looking strange. I've attached a screenshot of the slider as well. I've tried everything, but I can't seem to figure ...

javascriptphphtmlcssmysql

web browser freezing when trying to open bigger files

I have a project where I need to download multiple JSON data files and visualize them using D3 data charts. However, when the page loads, it takes around 2-3 minutes to download and visualize the files, especially on mobile devices. This causes the browser ...

javascripthtmljsond3.js

The padding on the left and right sides does not seem to be functioning properly on the menu links

Whenever I hover over the links on my menu, underlines slide in and out. However, I am facing an issue where the padding I added to the left and right of the links is not displaying correctly. Here is a visual representation of what I am trying to achieve ...

javascriptjqueryhtmlcss

Setting child div to match the parent div's height at 100% - here's how!

This is the layout of the page Here's the code snippet: <div class="newsContent row"> <div class="newsDate col-md-2">05 August 2014</div> <div class="newsSeparator col-md-1"> </div> <div class="newsDe ...

htmlcsstwitter-bootstrap

What steps should I take to ensure that the <select> tag is compatible with Microsoft Edge?

Currently, I am working on editing jsp files that utilize struts1. <html:select property="someProperty" style="width:110;height:110" styleClass="someClass"> However, when viewing it in Microsoft Edge, I noticed that the drop-down menu already ...

javascripthtmlmicrosoft-edgecompatibilitystruts-1

Integrate Vue.js with Laravel

Hey there fellow developers, I'm a university student who is new to using frameworks. Recently, I completed a project for my internship using the Laravel framework for the back end. Now, I want to tackle the front end using VueJS. Can anyone guide me ...

htmllaravelvue.js

Random Exclamation Point Appears in Outcome of PHP HTML-Email

I have been encountering exclamation points appearing randomly in the output of my PHP email function. After some research, I learned that this could be due to long lines or the need to encode the email in Base64. However, I am unsure how to go about doing ...

htmlemailphp

The issue of the window not closing after the parent page is refreshed

Working on a basic html/php/js project for internal use, I encountered a particular issue that has stumped me. Within the parent window, there is a JS function responsible for opening and closing a popup: function openit(){ boersenfenster = window.open ...

javascriptphphtmlpopupwindowpage-refresh

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...

javascripthtmlcssangulartypescript

prevent scrolling to a specific div

Hey, I'm facing a slight issue and need to prevent scrolling to the div after clicking on a link that targets the left div. <div class="kafelki"> <div class="kafelki-img"> <div class="target"> <div id="m1">dasdasdasd m1</di ...

htmlcss

PHP/HTML failing to upload extra large files

Allowing users to upload large files is causing an issue for me. I tested uploading a 22 MB file and it was successful. However, when I tried uploading a 200 MB file, it seems that the file does not enter the if block and instead returns the output from th ...

phpjqueryajaxhtml

What is the best way to ensure that the button aligns with the height of the surrounding form elements in Bootstrap 5?

I've been attempting to adjust the button to match the same height as the other elements (either make it smaller to align with them or enlarge the other elements to match the button). Here is the code snippet I used: <link href="https://cdn.jsde ...

htmlcssformatbootstrap-5

Choosing an element with Selenium based on another element's attributes

My current project involves using Selenium and Java to interact with a table. I am trying to create a selector that can locate a specific column in the table and perform a right-click action on it. The challenge I am facing is that while it's easy to ...

javahtmlcssseleniumxpath

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

Background Color Not Displaying in CSS3 Preloader Code

Utilizing a CSS3 Designed Preloader for my website with some unique keyframe animations. #preloader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50 ...

htmlcsscss-transitionscss-animationspreloader

Working with JQuery to extract and append data stored in a JSON object

I am working with the following JSON data: [ { "MOD_AXL": 0, "MOD_CDS_ID": 110000168, "MOD_CV": 0, "MOD_CV_CTM": null, "MOD_ID": 168, "MOD_MFA_ID": 514, "MOD_PC": 1, "MOD_PCON_END": 199007, "MOD_PCON_START": 196303, ...

jqueryhtmlruby-on-railsjson

Show the name of the chosen attribute option next to the label for variable products in Woocommerce

Is there a way in WooCommerce to have the selected attribute name displayed next to its label? <th class="label"> <label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute ...

phphtmljquerywordpresswoocommerce