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

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Break apart PDFs into individual images or convert to HTML

I'm currently working on a project that requires the development of a unique webtool. The purpose of this tool is to allow users to effortlessly upload their PDF documents, which will then be displayed in a browser with an engaging page flip effect ut ...

phpjqueryhtmlpdf

Instead of displaying an error page, an Axios post request is returning data

I'm currently dealing with a post request that looks like this: axios({ method: "post", url: "/sessions/add", data: { session: { name: session.session.name, date: sessionDateInput.value, ...

htmlnode.jsexpressaxiosejs

Arranging two stretchable div elements side by side

I'm currently working on a web page layout where I want two divs to be flexible and adjust their size as the browser window is resized. However, I've encountered an issue where instead of shrinking, the line breaks between the two divs when the w ...

htmlcss

Utilizing jQuery to dynamically load and display multiple files within a single div, replacing any previously loaded content

Forgive my lack of experience, as I am just starting out with this and it may be a simple issue. My goal is to have an empty div (popBox) load a file when a link is clicked, but currently I am struggling to overwrite the content in the div when clicking o ...

jqueryhtmllaravellaravel-4

Tips for modifying the color of a specific section of the border within a table

.table { background: #fff; position: relative; bottom: 210px; width: 90%; border: 2px solid #fff; border-width: 30px; border-collapse: collapse; } .table-year-1 { font-size: 22px; width: 2%; padding-top: 3px; ...

htmlcss

What is the best way to place tfoot at the top of the table

Below is the structure of my table: https://i.stack.imgur.com/QmlVn.png In the table, there are search input fields at the bottom of each column. I would like to move them to the top, right after the <thead> </thead>. The basic HTML code for ...

htmlcsshtml-table

Executing Controller method from an HTML webpage

I have designed a webpage in Html called SomePage.Html, and I am looking to trigger a method every time someone visits this page. Let's say I have a Controller named DefaultController with a method called - Get() and I want this method to be executed ...

c#htmlasp.net.netasp.net-web-api

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

Within my form, individuals have the option to select from radio buttons and checkboxes. The challenge is that I need to display the chosen data on the page before they enter their email and submit! Since I cannot refresh the page, PHP won't work for ...

javascriptphpjqueryhtmlajax

What is the best way to identify the full URL along with the querystring?

While using a web application on Firefox, I encounter an issue where clicking on a button redirects me to a different page and processes query string parameters that are hidden in the URL. Can anyone suggest tools that can help me identify these query str ...

htmlurlpostget

When using nextjs, there is an issue that arises when attempting to define the property 'id' using context.params.id. This results in

Attempting to retrieve data from a JSON file (response.json) hosted on localhost:8000/response.json. Below is the code snippet from pages/test.js: import React from "react"; import Link from "next/link"; import Image from "next/ima ...

javascripthtmljsonreactjsnext.js

Header with Sticky Behavior and Smooth Slide Down Animation

I am trying to achieve a scroll effect on my page where the header will move up when scrolling up, but at position 150 it should smoothly slide down and stay fixed at the top. I have tried various methods but haven't been able to get it right. Can som ...

jquerycsssticky

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

javascriptjqueryhtmlcss

Adjust the size at the location of the cursor

I am having trouble understanding how to implement zoom based on mouse position using this example here: (https://stackblitz.com/edit/js-fxnmkm?file=index.js) let node, scale = 1, posX = 0, posY = 0, node = document.querySelector('.f ...

javascripthtmlcanvashtml5-canvas

Copying text from an iframe using HTML and JavaScript

As someone who is relatively new to web development, I am currently attempting to transfer text from an iframe to a textarea located on a Bootstrap-html webpage. You can view an example of the code I am working with here: https://jsfiddle.net/fe5ahoyw/ J ...

javascriptjqueryhtmliframe

In Vuetify, components are distinct in their own unique way

For some reason, I am facing an issue where a component from Vuetify does not render properly on my localhost compared to the website of Vuetify. Expected result from Vuetify: Actual result from my localhost: This behavior is unfamiliar to me as I have ...

htmlvue.jsvuetify.js

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

There is a JSON object that I'm working with: [ { "SysID": "4", "Defect Classification": "Wrong Image Color", "1": "3.0", "2": "", "3": " ...

htmlangular

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

javascripthtmlcssreactjsslider