CSS Input Text
CSS Input Text
In web design, input text is a very important element. CSS can be used to style input text, including font, color, size, alignment, and more. This article will detail how to use CSS to beautify input text.
1. Setting Font Style
You can use CSS to set the font style of input text, including font type, size, weight, and more. Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Code Running Results:
In the above example, we use the font-family property to set the input text font type to Arial, the font-size property to set the font size to 16px, and the font-weight property to set the font weight to bold.
2. Set Text Color
You can use CSS to set the color of input text, either with a specific color value or a color name. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
color: #ff0000;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your email">
</body>
</html>
Result of running the code:
In the example above, we use the color attribute to set the color of the input text to red (#ff0000).
3. Set Text Alignment
You can use CSS to set the alignment of input text, including left, right, and center alignment. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
text-align: center;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your message">
</body>
</html>
Code Running Results:
In the example above, we use the text-align property to center the text input.
4. Setting Text Borders
You can use CSS to set the border style of text inputs, including border color, width, and style. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
border: 2px solid #0000ff;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your address">
</body>
</html>
Code running results:
In the example above, we use the border property to set the border style of the input text to a 2px wide solid blue border.
5. Setting the Text Background
You can use CSS to set the background style of the input text, including background color, background image, and more. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
background-color: #ffff00;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your phone number">
</body>
</html>
Code Running Results:
In the example above, we use the background-color property to set the background color of the input text to yellow (#ffff00).
6. Set Text Border Radius
You can use CSS to set the border radius of the input text to make the input box look more beautiful. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
border: 2px solid #00ff00;
border-radius: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your message">
</body>
</html>
Code Running Results:
In the example above, we use the border-radius property to set the border radius of the input text to 10px.
7. Setting Text Shadow
You can use CSS to set a shadow effect on the input text, making the input box look more three-dimensional. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
box-shadow: 5px 5px 5px #888888;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Code Running Results:
In the example above, we use the box-shadow property to set the shadow effect of the input text with a 5px offset, a 5px blur radius, and a gray shadow color (#888888).
8. Setting Text Transparency
You can use CSS to set the transparency of input text, making the input box appear more translucent. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
opacity: 0.5;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your email">
</body>
</html>
Code Running Results:
In the example above, we use the opacity property to set the opacity of the input text to 0.5.
9. Setting Text Padding
You can use CSS to set the padding style of input text, including padding and margins. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your address">
</body>
</html>
Code Running Results:
In the example above, we use the padding property to set the padding of the text input to 10px.
10. Setting Text Border Styles
You can use CSS to set the border style of input text, including solid, dashed, and dotted lines. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
border: 2px dashed #ff00ff;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your phone number">
</body>
</html>
Code Running Results:
In the example above, we use the border property to set the border style of the text input to a 2px thick purple dashed border.
11. Setting the Text Input Size
You can use CSS to set the size of the text input, including width and height. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your message">
</body>
</html>
Code Running Results:
In the example above, we use the width attribute to set the width of the input text box to 200px, and the height attribute to set the height to 30px.
12. Setting the Disabled State of a Text Input Box
You can use CSS to set the disabled state of an input text box, preventing users from entering data. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
background-color: #cccccc;
color: #999999;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name" disabled>
</body>
</html>
Code Running Results:
In the example above, we use the :disabled pseudo-class to set the input text box’s background color to gray (#cccccc) and its text color to light gray (#999999).
13. Setting Hover Effects for Text Inputs
You can use CSS to set hover effects for text inputs, giving users visual feedback when their mouse hovers over them. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your email">
</body>
</html>
Result of running the code:
In the example above, we use the :hover pseudo-class to set the hover effect of the text input to a red border.
14. Setting the Focus Effect for Text Inputs
You can use CSS to set the focus effect for text inputs, giving users visual feedback when the input has focus. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: #ffffcc;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your address">
</body>
</html>
Code Running Results:
In the example above, we use the :focus pseudo-class to set the focus effect of the input text box to a yellow background.
15. Set Text Input Box Autofill
You can use CSS to set the autofill effect of the input text box, so that it will automatically fill in the content when the user enters the content. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
color: #999999;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Code Running Results:
In the example above, we use the ::placeholder pseudo-element to set the placeholder text color of the input text box to gray (#999999).
16. Setting a Clear Button for a Text Input Box
You can use CSS to set a clear button for a text input box, allowing users to clear their input after entering content. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
background-image: url('https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/images/clear.png');
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your email">
</body>
</html>
Code Runtime Result:
In the example above, we use the background-image property to set the clear button icon for the input text box, the background-position property to position the icon on the right, and the background-repeat property to prevent it from repeating.
17. Setting the Text Input Cursor Style
You can use CSS to set the cursor style for the input text box, giving users different cursor styles when typing. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your message">
</body>
</html>
Code running results:
In the above example, we used “
html
cursor: Use the `pointer;` property to set the cursor style of the text input box to a hand cursor.
18. Set the border radius of the text input box
You can use CSS to set the border radius of the text input box, giving it a rounded effect. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
border-radius: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your username">
</body>
</html>
Code Running Results:
In the example above, we use the border-radius property to set the border radius of the text input box to 10px.
19. Setting a Background Gradient Color for the Text Input Box
You can use CSS to set a background gradient color for the text input box, creating a gradient effect. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
background: linear-gradient(to right, #ffcc00, #ff6600);
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your password">
</body>
</html>
Code Running Results:
In the example above, we use the background property to set the background of the text input box to a linear gradient from yellow (#ffcc00) to orange (#ff6600) from left to right.
20. Setting a Text Input Box Shadow Effect
You can use CSS to set a shadow effect on the text input box to give it a three-dimensional feel. Here’s a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
input {
box-shadow: 2px 2px 5px #888888;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your message">
</body>
</html>
Code Running Results:
In the example above, we use the box-shadow property to set a shadow effect for the text input box. The shadow offset is 2px horizontally and vertically, the blur radius is 5px, and the shadow color is gray (#888888).
The above are some common CSS style settings. You can adjust and combine them according to your actual needs to create a text input box style that meets your design requirements.