Adjust the size of the font for the placeholder text

I've been attempting to adjust the font size of the placeholder text. I added the font size property to the listed classes below, but for some reason, it's not taking effect.

Could you please advise me on how to resolve this issue so that I can address it independently in the future?

Included is my code snippet and sandbox link:

https://codesandbox.io/s/61183rqp3w

 cssLabel: {
    "&$cssFocused": {
      color: purple[500],
      fontSize: 14
    }
  },
  cssFocused: {},
  cssUnderline: {
    "&:after": {
      borderBottomColor: purple[500],
      fontSize: 14
    }
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: purple[500],
      fontSize: 14
    }
  },
  notchedOutline: {},
javascripthtmlcssreactjsmaterial-ui

Answer №1

If you want to reach your goal, you need to adjust the input styles properties in InputProps. Here is an example:

Important: This will display ellipsis if the placeholder overflows.

const styles = theme => ({
  input: {
    "&::placeholder": {
      textOverflow: "ellipsis !important",
      color: "blue",
      fontSize: 14
    }
  }
});

Also,

the component should look like this:

<TextField
  InputProps={{
   classes: {
     input: classes.input
   }
  }}
  variant="outlined"
  placeholder="Exp. XXXXXXXXXXXX"
/>

You can view the code sandbox by following this link: https://codesandbox.io/s/9j479w189y

Answer №2

To customize the placeholder style, you can use the following code snippet:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Check out the original source for more information: CSS-tricks

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

“Unable to update value using Controller component in react-hook-form”

Currently, I am utilizing the react-hook-form in combination with MUI components. In order to incorporate the Select component, I have enclosed it within the Controller since direct registration is not possible. Although everything seems to be functioning ...

javascriptreactjsreact-hooksmaterial-uireact-hook-form

Expand Bootstrap navbar search box outside collapse menu

Currently, I am working on designing a navigation bar that showcases my brand on the left side, a full-width search bar in the center, and additional pages on the right. I am facing challenges in maintaining the full-width of the search bar without causing ...

htmlcsstwitter-bootstrap

Error message during Jest Enzyme testing: The "store" was not located within the scope of "Connect(App)"

I am faced with an issue in my index.js file, which includes: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App' import * as serviceWorker from './servi ...

reactjsjestjsenzyme

Is there a way to convert an array into a single comma-separated value using parameters?

Is there a way to parameterize an array as a single name-value pair that is comma separated? I have tried using jQuery $.param, but it creates a parameter for each value in the array instead of just one. Unfortunately, it seems that there is no option or s ...

javascriptjquery

Equalizing column heights in Bootstrap layouts

It seems like a straightforward issue, but I'm having trouble finding a solution. I am utilizing Bootstrap5 for this project. You can find the complete code here : Due to some problems with Codeply, I have also uploaded it on jsfiddle. https://jsf ...

htmlcssbootstrap-5

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss

What is the best way to assign the order position in CSS?

I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks: The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows: .circles { pos ...

cssreactjs

"Encountered a broken image while attempting to send a response with the content-type set as

Within my frontend html, I am looking to include an img element with the source link '/uploads/profilePicture'. In my node/express setup, I need to verify the user's authentication, retrieve their profile picture from the filesystem, and ret ...

htmlnode.jsimageexpressroutes

Allowing horizontal scrolling in a table cell set to full width

I'm attempting to achieve the desired outcome by utilizing the code provided at What I'd like to know is why the scrolling function isn't working as expected. Instead of scrolling, it simply expands the table. To see the difference, try run ...

htmlcsscss-tables

Sending a variable from the server to the client using express rendering in Node.js

When using a Node.js express server, I am attempting to pass a variable to the index.ejs file on the client side. In my server code, I have added: res.render("dashboard/index", { hidePayment: true }); The problem arises when trying to access the hidePayme ...

javascriptnode.jsexpress

The getElementByID function functions properly in Firefox but does encounter issues in Internet Explorer and Chrome

function switchVideo() { let selectedIndex = document.myvid1.vid_select.selectedIndex; let videoSelect = document.myvid1.vid_select.options[selectedIndex].value; document.getElementById("video").src = videoSelect; } <form name="myvid1"> <s ...

javascripthtml

Why isn't the image utilizing all the available space?

I'm working on creating a simple card to display services, with just an image and some text. However, I'm facing an issue where the image is not taking up the full width and height of the container as expected. Could someone help me figure out w ...

cssreactjsnext.jssass

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

Move a CSS div with animation to a specific fixed position

Is there a way to modify this code so that the ball moves to the right and remains in that position? http://codepen.io/chriscoyier/pen/pBCax You can experiment with the live version of the output by clicking on the link above. body { padding: 30px; } # ...

css

Show a component based on the state after initially displaying some content

I have implemented a dropdown menu that allows users to select different codecs. Depending on the codec chosen, I want to display another component with options specific to that codec. For instance, if the user selects MP3, I intend to show the <MP3Opti ...

reactjscomponentsstateonchange

Issue with Jquery Crop: image not updating when using cropper

Here is the code I'm working with: <link rel="stylesheet" href="style.css"> <script src="/static/js/jquery/2.1.4/jquery.min.js"></script> <script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script> &l ...

javascriptjquerycropcropper

Div keydown event not being triggered in Vue

I've been struggling to get my event to fire despite following the instructions in the title. @keydown="keyPressed($event)" Although currently it looks like this, I have also attempted setting the tabIndex and adding it on mount as shown be ...

javascriptvue.js

Having trouble accessing Vuex's getter property within a computed property

Can you help me troubleshoot an issue? When I call a getter inside a computed property, it is giving me the following error message: TS2339: Property 'dictionary' does not exist on type 'CreateComponentPublicInstance{}, {}, {}, {}, {}, Com ...

javascripttypescriptvue.js

Tips for creating JavaScript validation for the Amount input field (in the format 22.00) in an ASP.NET application

In this aspx page using ASP.NET 4.0, there is a text box where users can enter a rate. The requirement is that only numbers are allowed to be entered. For example, if the user enters 22, it should display as 22.00. If the user enters 22.5, it should displa ...

javascriptasp.net

Generating an unexpected card image: "Requesting unfamiliar module"

I am attempting to create a random card image based on the string returned by this.generateRandomCard(), but I'm encountering the following error: "Requiring unknown module "./card_images/7S.png". If you are sure the module is there, try restarting t ...

reactjsreact-native