Tips for updating placeholder text styling

I'm currently working on customizing the font for my User ID and Password placeholders. I've applied the css code below to change the font of the User ID placeholder, but for some reason, it's not affecting the Password placeholder font. Any ideas why?

Any suggestions or advice would be greatly appreciated.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: 'helveticaneueregular', sans-serif !important;
}
::-moz-placeholder { /* Firefox 19+ */
      font-family: 'helveticaneueregular', sans-serif !important;
}
:-ms-input-placeholder { /* IE 10+ */
      font-family: 'helveticaneueregular', sans-serif !important;
}
:-moz-placeholder { /* Firefox 18- */
      font-family: 'helveticaneueregular', sans-serif !important;
}
<input style="font-family: 'helveticaneueregular', sans-serif !important;" type="text" id="username" name="username" role="textbox" class="rememberMainField txt15 commonFont1Style2 clearTextField" placeholder="User ID" required="" autocapitalize="off" autocomplete="off" autocorrect="off" aria-label="Enter Your User ID" maxlength="50" minlength="3" pattern="^[^ ]+$" relinputid="RelativeClass0">

css

Answer №1

Need more details? This example demonstrates how it can work for both situations:

.font1::-webkit-input-placeholder {
    font-family: "Times New Roman", Times, serif;
    background-color: yellow;
}

.font2::-webkit-input-placeholder { 
    font-family: Arial, Helvetica, sans-serif;
    background-color: pink;
}
Times New Roman placeholder font:<br/>
<input class="font1" placeholder="User ID">
<input class="font1" type="password" placeholder="Password">
<br/><br/>
Arial placeholder font:<br/>
<input class="font2" placeholder="User ID" >
<input class="font2" type="password" placeholder="Password">

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

Arrange elements side by side within siblings, while keeping the HTML structure intact

As evident from the code snippet, there are 2 dynamically generated flex divs (although there could be more). Is there a method to horizontally align items on larger screens without altering the HTML structure? I am seeking something similar to: https:/ ...

htmlcss

How to Customize H1 Font Family in Bootstrap 4

Hey there! I'm trying to figure out how to change the font-family of an H1 element in Bootstrap 4, but I'm having some trouble. I'm pretty new to using Bootstrap so I followed a tutorial on Youtube, but it didn't cover changing the font ...

htmlcssbootstrap-4

A guide to resizing images to fit the page in React using Bootstrap

Currently, I am utilizing a function to iterate over each item in the props array and generate an image tag. My goal is to have every set of 3 images enclosed within a row div using Bootstrap to ensure proper page layout. However, I am struggling to implem ...

javascriptcssreactjsbootstrap-4

The alignment of rows and columns is not proper

I have been using bootstrap and encountering an issue with aligning rows containing 2 columns each. The alignment is not appearing as desired. What I want: https://i.sstatic.net/OoIiB.jpg However, what I am getting is different: https://i.sstatic.net/FpI3 ...

htmlcsstwitter-bootstrap

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

The CSS transition seems to be malfunctioning

I need help figuring out how to make the submenu in the navigation bar appear with a transition effect. The CSS code I'm currently using is: #navigation li ul { display: none; width: auto; position: absolute; margin: 0; padding: 0; ...

css

Background gradients in versions of Internet Explorer 8 or earlier

For my website, I'd like to incorporate gradient backgrounds specifically for Internet Explorer. I am aware of a proprietary method for achieving this: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr= ...

htmlcssinternet-explorer

Achieve scrollability for right column (div) using Tailwind CSS

I am having trouble getting the content in the right column to scroll vertically. Can someone please help me identify what I'm doing wrong here? <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/> < ...

htmlcsstailwind-css

Looking to switch up the hide/show toggle animation?

Currently, I have a functioning element with the following code. It involves an object named #obj1 that remains hidden upon page load but becomes visible when #obj2 is clicked. #obj1{ position:fixed; width:100px; bottom:180px; right:10 ...

javascriptjquerycss

Locate specific text within the content and apply an underline to it

Is there a way to locate specific text on my website and apply an underline to it? Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them. Here is my attempt at the code: $( "body:contains('hell ...

jqueryhtmlcss

Steps to remove a scrollbar from a fullscreen slider

Can anyone provide code examples on how to disable the scroll bar on a full screen slider? I want to have a scroll down button on each slider that, when clicked, will show the scrollbar only below the slider. I don't want the scrollbar to be visible ...

javascriptjquerycsshtmlscrollbar

Show a directional indicator on hover in the date selection tool

I am currently using a datepicker that looks like this: https://i.sstatic.net/XsrTO.png When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: functi ...

javascriptjqueryhtmlcssdatepicker

Guide to automatically converting Google fonts to base64 for inline use

I am currently in the process of creating my own personal blog using next.js. While everything is going smoothly with the use of Google Fonts for font styling, I have encountered an issue with initial content shift upon loading. This occurs when a new fon ...

htmlcssfontsnext.js

Achieve a stylish layout by displaying three cards per row using Vue.js and Bootstrap 4

I'm facing an issue with my code where I am trying to display Bootstrap cards in rows of three, but the layout is not rendering correctly. It starts with one card, then two, and eventually adds a new column, resulting in some empty spaces with offsets ...

csstwitter-bootstrapvue.jsvuejs2bootstrap-4

Slowdown in functionality

My current project involves creating a user interface for an Oven configuration application using CSS, Java Script, Jquery & Json. While the interface performs actions within milliseconds on browsers and simulators, my client has noticed that it takes seco ...

javascriptjqueryhtmlcss

CSS: Concealing a separate div

I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript. Take a look at my Fiddle here <div class="parrent"> <div id ...

javascripthtmlcsssiblings

Align the text to the top vertically

Take a look at the DEMO I've been experimenting with. I'm aiming to align the text perfectly at the top of the div to match the image alignment. I want both the image and text to be aligned as if they were on the same line, currently there appe ...

htmlcss

Having difficulty adding a border to the SlidesJS frame

I am utilizing the SlidesJS jQuery plugin which can be found here. My goal is to add a border around the slider. I adjusted the CSS section like so: #slides .slidesjs-container { margin-bottom:10px; border-color: #ff5566; border-width: 3px; borde ...

javascriptjquerycssxhtml

Ways to create a uniquely scrollable div in React Bootstrap

Currently, I'm working on implementing React Bootstrap for my website. I am having trouble figuring out how to make only one specific div scrollable while keeping the others fixed. Below is a snippet of my code located in App.js import * as React from ...

cssreactjsbootstrap-4react-bootstrap

Find the string "s" within a div element aligned vertically, using Popper

Currently utilizing Popper from Material-UI <Popper id={"simplePopper"} open={true} style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}> <div style={{height:"100%", ...

javascriptcssreactjsmaterial-ui