Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

HTML code:-

<p><input type="text" placeholder="Enter your username"></p>

CSS code:-

.main-header input
{
    width: 90%;
    padding: 1rem;
    margin: 20px 0px;
    border: none;
    border-bottom: 4px solid #5f5fb0;
    font-size: 1.3rem;
    background: transparent;
    outline: none;
}
::-webkit-input-placeholder
{
    color: #fff;
}

I am struggling to change the text color to white (#fff) in the user input box on my webpage using HTML and CSS. Despite multiple attempts, I have not been successful in achieving this. If anyone can offer assistance or a solution to this issue, it would be greatly appreciated.

Please assist me in resolving this problem.

htmlcssinputcolors

Answer №1

It appears that what you are looking for is .main-header input.

input[type="text"]
{
    width: 90%;
    padding: 1rem;
    margin: 20px 0px;
    border: none;
    border-bottom: 4px solid #5f5fb0;
    font-size: 1.3rem;
    background: black;
    outline: none;
    color: white;
}
::-webkit-input-placeholder
{
    color: #fff;
}
<p><input type="text" placeholder="Username"></p>

Answer №2

To change the color of the text inside an input tag, you need to use the color property within the selector itself.

input {
  color: white;
  background-color: black;
}
<input type="text">

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

Adjust SVG Checkbox to eliminate any unnecessary padding

I am attempting to customize the MUI5 checkbox CSS fields, and here is the current status: https://i.stack.imgur.com/BROpS.png These are my CSS classes: MuiCheckbox: { styleOverrides: { root: { ".MuiSvgIcon-root": { backgro ...

htmlcsssvgmaterial-ui

I encountered an issue with my foreach loop where the checkbox failed to properly send the value

Having an issue with the checkbox not sending the desired value. This is my HTML code for the checkbox. I am using a foreach loop. <form id="signupform" autocomplete="off" method="post" action="inputchecklist.php" class="form_container left_label"> ...

phphtml

How to position one div next to another using CSS and HTML

Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I&a ...

htmlcss

Unlock the power of VueJS with advanced checkbox toggling for array data

I have encountered an issue while working with VueJS regarding the implementation of two features for a set of checkboxes. Initially, the checkboxes are generated dynamically. I am in need of a master 'toggle' checkbox that can toggle the stat ...

javascripthtmlarraysvue.js

Retrieve text excluding a specific class or id using jQuery

I need help with extracting text from an HTML div. <div id="example"> I am writing a <span class='outer'>query for help <span class='inner'>on a coding forum</span></span> </div> const te ...

javascripthtmljquerytext

Issue with Quantity Box not displaying values in Shopify store

I am currently seeking assistance with resolving an issue I have encountered on a Shopify theme that I recently customized. The problem lies within the quantity box on the live site where despite being able to adjust the quantity using the buttons, the act ...

javascriptjqueryhtmlcssshopify

Validation of time picker consistently returns false

While using the daterangepicker library for my form validation with JavaScript, I encountered an issue with the time field. It returns false and displays an error message saying: "Please enter a valid time, between 00:00 and 23:59," preventing me from addi ...

javascriptjqueryhtml

The Gulp task is failing to generate the CSS file

Greetings! I have a task set up in my gulpfile.js as shown below: const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function(){ return gulp.src('sass/*.scss') .pipe(sass()) ...

csssassgulp

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Having some trouble closing a Bootstrap alert automatically on my new site built using the Bootstrap Framework. The issue arises when trying to close the alert after a certain amount of time. On the main page of the site, there is a modal login form. When ...

javascriptphpjqueryhtmltwitter-bootstrap

Manipulate component properties using CSS hover in React with Material-UI

I am attempting to modify the noWrap property of a Typography element when hovering over it. I have defined a custom CSS class for the parent element and the hover functionality is working correctly. However, I am unsure how to adjust the noWrap property u ...

javascriptcssreactjsmaterial-ui

Looking to validate each input field individually using jQuery?

I am in need of validating all form inputs in the keyup function without having to write validation for each individual input. Is there a way to achieve this using methods like each();? Apologies for what may seem like a silly question. ' ...

jqueryhtmlvalidation

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

javascripthtmlcssscroll-snap

Ways to extract information from a table cell located next to a table cell with colspan

As a beginner in web scraping, I am gradually making progress. However, I'm facing a tough challenge with this particular task. My goal is to extract data from the ESPN NBA boxscore website: I aim to scrape the names of players labeled as "DNP" (Did ...

pythonhtmlflaskweb-scrapingscreen-scraping

What is the best way to send an HTML report through email with embedded images as an attachment?

Currently, I am in the process of generating a report using ExtentReports that will be distributed via email to team members who are outside of our domain. To capture screenshots of any test failures, I utilize a screenshot method which saves these images ...

javahtmlseleniumreportjakarta-mail

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

htmlcss

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...

cssangular

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

It's strange because my style.css file in the public folder works on one page but gives me an error on another. I'm not sure why it would work on one page and not on the other. The CSS is imported in index.html so it should work on all pages of t ...

javascriptcssreactjsnode.jsreact-router

text/x-handlebars always missing in action

I'm currently working on my first app and I'm facing an issue with displaying handlebars scripts in the browser. Below is the HTML code: <!doctype html> <html> <head> <title>Random Presents</title> ...

javascripthtmlember.jshandlebars.js