How do I style text input by a user?

Zach Handler

I am trying to apply styles to the text that users enter into a form. There are two things I would like to figure out:

(1) How do I indent/add padding so that the text is not touching the left edge of the element?

(2) How do I change the font and font-size of the text?

Here is an image of the current form element and this is what I am trying to achieve.

Jason McFarlane

You need to apply padding to your element in your stylesheet, either give it a class name or style the input itself. I added some different colors in there just to show you that you can style it different ways.

.my-input {
  padding: 10px;
  border: 1px solid blue;
  border-radius: 4px;
  color: pink;
}
<input type="text" value="some text value" class="my-input" />

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React Native: How do I generate a box after user input with the text from user input?

How do I display tooltip text for HTML <input> element using CSS style and data-title attribute?

How do I allow a user to input strings into an array until they hit enter with no text input?

How do I limit my user input

How do i validate integer as user input?

How do I prompt for user input in AutoHotkey?

How do I keep a user input? (php)

How do I convert user input into a list?

How do I make a rectangle with user input?

How do i output a user input string

How do i store user input in an array?

How do i validate a user input in python?

How do I validate user input in a loop?

How do i get user input with Ursina

how do i make the user input a double?

How do I compare user input to a variable?

How do I set the name a child in Firebase to user input from a text field?

How do I get user input from text fields and display it on the webpage?

Ruby on Rails: How can I allow a user to style text on a form?

How do I add text to a input element?

Is it possible to style the text that the user input in a contactform

Is it possible to style the text font that the user input in a contactform

How do I echo the text that the user entered?

How to style input text in textbox?

How do I add a PHP code that will always open/create a new text file and write user input once user clicks 'Submit' button

How do I change the style of an "<input>" element dynamically using Javascript?

How do I style the gold-email-input Polymer element?

How to style the input after a user leaves the input

How do I ask for user input until the input is a number?