Adjust the size of the password input characters without changing the appearance of the placeholder

Is there a way to enlarge the font size of an HTML password input without changing the placeholder text as well? Specifically, I am looking to increase the size of the password symbols (bullets).

I attempted to adjust the font-size property of input[type="password"]. While this successfully increased the size of the symbols, it also affected the placeholder text.

Is there a workaround to prevent the placeholder text from being impacted by the font size change? I am aware that placeholders can be targeted using ::-webkit-input-placeholder or :-moz-placeholder, but applying these globally goes against the intention of my query.

Feel free to provide solutions using HTML, CSS, JavaScript, or jQuery.

javascriptjqueryhtmlcss

Answer №1

I couldn't find a precise solution to your problem, but I created a fiddle with some JavaScript/jQuery code to help resolve it.

HTML

 <input id="txtInput" type="password" placeholder="Password" onchange="CheckModification();" onpaste="this.onchange();" oninput="this.onchange();"/>

jQuery

$(document).ready(function(){
    $('#txtInput').focus(function () {
        if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '14px');
         }
         else {
             $('#txtInput').css('font-size', '24px');
         }
     });

     $('#txtInput').blur(function () {
         if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '14px');
         }
         else {
             $('#txtInput').css('font-size', '24px');
         }
     });
 });

function CheckModification(){
         if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '14px');
         }
         else {
             $('#txtInput').css('font-size', '24px');
         }
     }

Give it a try here

Hopefully this will be useful for you.

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

Expansion issue with Bootstrap panel

I am currently using Bootstrap 3 for the development of a social networking site. The issue I'm encountering involves displaying comments within a panel footer on toggle. However, the comments are extending beyond the footer area. Can anyone provide g ...

phphtmlcsstwitter-bootstrap-3

I'm having trouble accessing my POST data using console.log. Instead of getting the expected data, all I see in the console when I try to GET is "

My code for the POST function is working, but when I try to retrieve and display the POST response from the server, all I get is "null". Can anyone help me figure out how to properly send data from my form to the server and then successfully console log it ...

javascriptformspostget

Tips for changing the display of input type submit value on hover using CSS in a React Component

I need help with a form that has an <input type="submit" element where the value is set dynamically based on currIntValue. My goal is to change the displayed value to 'Search' when hovering over the input, instead of showing currIntValue. I ...

cssreactjssass

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

After refreshing the page, Angular 8 may incorrectly load JavaScript from an incorrect path when accessing a lazy loaded

Whenever I refresh the page while on a lazy loaded module, the application breaks because it attempts to import JavaScript files from an incorrect path. Here is an overview of my routing configuration: App Routing Module: { path: 'accommodations&ap ...

javascriptangularroutesangular8

Ensure that the content remains centered within absolutely positioned DIVs inside the parent container

Imagine a scenario where you have a container with a fixed width and centered. Inside this container are two DIVs that are position relative to the window, placed side by side. The content inside these DIVs should ideally be centered, aligned with the cont ...

htmlcsscss-position

Calculate the number of items per month by utilizing JSON and the jQuery `each()` function paired with an IF statement

Looking to neatly display sales data per item and month from a JSON object in HTML? You're in the right place! The JSON object contains information on items with their corresponding sales listed by month: var my_object= [{"item_id":"11","month":"Feb ...

jqueryjsonif-statementfor-loopeach

Step-by-step guide on integrating async and await functionality into Vuetify rules using an ajax call

I'm currently using Vuetify form validation to validate an input field, and I'm exploring the possibility of making an ajax get call await so that I can utilize the result in a rule. However, my attempts at this approach have not been successful! ...

javascriptajaxvue.jsaxiosvuetify.js

What methods are used to maintain the state of the express req.session object?

My journey into learning Node and Express is just beginning, and I am currently trying to comprehend the flow of code with Express. Imagine you have code like this in a session.js file: app.post('/session', notLoggedIn, function(req, res) { ...

javascriptnode.jssessionexpress

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

javascripthtmlcssinternet-explorerinternet-explorer-11

Obtaining data from HTML tags using Beautifulsoup

Here is the complete HTML code that I am currently working with. Below is a simplified version of the HTML provided above: <table class="premium"> <tr class="retailer top-offer" data-pricer="47.84" saler-id=" ...

pythonhtmlparsingbeautifulsoupextract

Verify for a class that does not exist

I am working on a script that updates the content of a div and increments its value by 1 $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), }, }); ...

javascriptjqueryajax

Avoiding the collapse of the Bootstrap 4 navbar

Having trouble with the navbar collapsing on itself? The issue seems to occur around 1280px window size, but works fine when the window is wider or narrower. https://www.bootply.com/AcsaaqReAL .navbar-custom { background-color: #333333; border- ...

htmlcsstwitter-bootstrapbootstrap-4

Exploring the proper syntax of the reduce() method in JavaScript

Here are two codes that can be executed from any browser. Code1: let prices = [1, 2, 3, 4, 5]; let result = prices.reduce( (x,y)=>{x+y} ); // Reduces data from x to y. console.log(result); Code2: let prices = [1, 2, 3, 4, 5]; let result = prices.red ...

javascriptecmascript-6

The issue of the horizontal navigation bar not functioning properly persists when a specific width

I am currently working on building a horizontal navigation bar using CSS. What puzzles me is that when I specify a width for my ol tag, the horizontal float function does not seem to cooperate. However, if I remove the width property, everything works jus ...

htmlcsscss-float

Attempting to create a functional action listener for a deck of cards game

I'm currently working on a game and want to make an image appear blank when clicked on, to simulate it disappearing. Specifically, this is for a tri peaks solitaire game. I have a function that tests the validity of playing a card, but I'm strugg ...

javascripthtml

Angular state correctly maps to the controller but is not reflected in the HTML

I'm currently in the process of setting up a basic Angular application, something I've done many times before. I have defined a home state and another state for a note-taking app, but I am facing an issue where neither state is displaying or inje ...

javascripthtmlangularjs

"Creating a Miniview Panel on a Fabric Canvas: A Step-by-Step Guide

Is there a way to add a mini view panel to my Fabric Canvas like shown in this image MiniView Panel? I want a panel in the corner of my canvas that displays the entire layout. Similar to the panel on this website . ...

javascripthtml5-canvasfabricjspanel

Using Javascript to populate textboxes with the value of checkboxes

Within my web application, there is a series of checkboxes that, when selected, populate a textbox located above them. If more than one checkbox is checked, their values are displayed in the textbox separated by commas. These checkboxes are structured as ...

javascriptjqueryhtml

Issues arise when the Slick functionality fails to load following an ajax request

I've come across a situation similar to the one on this post. I'm having trouble getting my slick carousel to work after a successful ajax call. Despite trying all the solutions provided, it's still not functioning as expected. The code for ...

javascriptajaxslick.js