Problem with input placeholder when using text transformation

I recently created an input form and applied the CSS property text-transform: uppercase;

#textbox {
    outline:none;
    background:#732ab7;
    caret-color:lightgreen;
    border-style:groove;
    border-width:0px 0px 10px 0px;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom-color:lightgreen;
    padding:0px 0px 2px 15px;
    text-transform: lowercase;
}

However, even though I set the placeholder as "Name," when viewed on the webpage it displays as "NAME," which looks out of place. Here is how the HTML input tag is structured:

<input hspace="32px" vspace="70px" id="textbox" type="text" placeholder="Name"></input>
htmlcss

Answer №1

To customize the placeholder styling in different browsers, you can utilize the following CSS code:

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

If you need more information, someone has already provided an answer, so feel free to check it out.

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

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

Assign a value to a jQuery variable from user input

Can someone assist me in setting an input field to the value of a jQuery variable? I am encountering difficulties with this task. My aim is to have equipment failure counts appear in an input textbox so that I can later write the value back to a table. Eac ...

htmljqueryvariables

Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line for ...

cssmenu

Mobile browser not resizing window width in fluid layout on WordPress site

Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome. However, when I tried to acce ...

jqueryhtmlcsswindows-phone-8fluid-layout

Trouble with CSS Vertical Alignment: Solutions to Fix it

Link to a JSFiddle for reference: http://jsfiddle.net/STmwz/4/ Initially, there is only the top div displayed. Upon clicking the edit button, the JavaScript code replaces the top div with the bottom div. However, during this transition, there is a slight ...

htmlcss

JavaScript error - Property value is not valid

When I use IE 6/7/8, I encounter a JavaScript error message. The problematic line of code reads as follows: document.getElementById('all').style.backgroundColor = color; The specific error reported in IE 6/7/8 is as follows: Invalid property ...

javascripthtml

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

Can the system automatically generate and display a new user ID right after a form is submitted?

Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...

phphtmlformsmysqliecho

Interactive hover text appears when you mouse over the SVG path

Does anyone know the simplest way to display sample text when hovering over an svg path? Below is my CSS code: <style> path:hover{ fill:yellow;stroke:blue; } .available { fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;strok ...

javascriptjquerycsssvg

Why does Socket.IO seem to be registering two clients instead of just one when there is only one connection

When using my app, the user first lands on the home screen where they can select their username. They then proceed to another page and from there, navigate to the room entry page. The issue I'm facing is with a specific section of my code that update ...

javascripthtmlnode.jsexpresssocket.io

Content within a Row of a Data Table

Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...

javascriptjqueryhtmlcss

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

htmlcsssass

Are you in need of a flexbox list that can be scrolled

How can I create a scrollable ul element? Currently, it appears that the ul flexbox extends beyond the browser window. html <div class="container"> <div class="header"> Untitled </div> <ul/> <li>1</li> ...

htmlcssflexbox

Tips for preventing errors in formatting?

I created a field using rectangles as divs. However, when I add content to the rectangle divs, the formatting gets messed up. Can anyone help me fix this issue? Here's the link <div class='line' id='line1'> <div class=& ...

htmlcss

Creating a text shadow effect with text that has a transparent color

I am attempting to replicate the design shown below using the CSS text-shadow property, but I keep getting a solid color outcome. I have tried using an rgba value of 255,0,0,0.0 for the font-color and text-shadow like this: text-shadow: -1px -1px 0 #0 ...

css

"Experience the power of Angular.js through seamless animations created by blending the capabilities

I want to smoothly fade out the old view and fade in the new view. The challenge is that the new content must be positioned absolutely until the old one fades out. I also want to set a specific top position and height for the new content, but when I try to ...

javascriptcssangularjsanimationcss-transitions

Mobile navigation menu options on the left and right sides

I've encountered an issue with my mobile navigation. I have two navigation menus - one on the left and one on the right, designed to slide out when triggered. The left menu functions correctly with a smooth transition, but the right menu abruptly pops ...

jquerycssnavigation

Morris.js tutorial: Enhancing bar charts with data labels

I have this: But I want this instead: Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

javascriptjqueryhtmlcssmorris.js

Creating a sliding bottom border effect with CSS when clicked

Is there a way to animate the sliding of the bottom border of a menu item when clicked on? Check out the code below: HTML - <div class="menu"> <div class="menu-item active">menu 1</div> <div class="menu-item">menu 2</ ...

javascriptjqueryhtmlcss

Issue with function incorrectly computing values and returning NaN

My challenge is to develop a countdown timer, but it keeps returning NaN instead of counting down. I have multiple counters in place - one that counts down, another that counts up until the stop time specified by stoptime, and a third that kicks in after s ...

javascriptjqueryhtml