HTML textarea text input field border style and border color

 The border style and border color of HTML textarea text input fields are often not very beautiful under default conditions. Although many browsers will beautify the border style of textarea, they may not be able to present the most perfect effect. Many designs In order to make the textarea conform to the style of the entire webpage design, the teacher will do some beautification work specifically for the textarea. The two simplest items include "border style" and "border color" modification. Both items can be modified through css. .

Modify the border style and border color of the HTML textarea text input field. The sample list

provides several different modification styles for your reference.

Example 1. Orange dotted border (3px thickness)

<textarea style="border:3px orange dashed;">
Here is the content of textarea
</textarea>

Present results

Use style in the opening tag of the textarea to declare that the style is the standard rule of CSS. We use the CSS border design attribute border . The advantage is that you can directly design the border thickness, color and style of the textarea. Take the example "border:3px orange dashed" In this way of writing, it means that the border thickness is 3px, the color is orange, and the border style is dashed. You can see the beautified textarea border in the displayed result!

Example 2: Green solid border (2px thickness)

<textarea style="border:2px green solid;">
Here is the content of textarea
</textarea>

Present results

The second example is to change the thickness of the border of the example from 3px to 2px, the color from orange to green, and the style to solid. These items can be modified by themselves. The following two themes The content is quite practical.

• Hexadecimal color codes for hundreds of colors: color code table .
• Commonly used css border style reference: CSS border-style border style .
• Adjust the width of the border : CSS border-width border width .

After reading the above three articles, you should be able to modify the border color and style of the textarea.

Example 3: Blue double solid border (2px thickness)

<textarea style="border:3px blue double;">
Here is the content of textarea
</textarea>

Present results

Especially the double solid line border is taken as an example, because this effect is often used in the form, we changed the thickness of the border to 3px, the color to blue, and the focus is to change the style to double solid line (double) This kind of effect can be presented. Here, a little attention should be paid to try not to use too small a border thickness. For example, 1px or 2px is not ideal, because the double solid lines will overlap or stick together and lose the effect.

The above are a few examples of HTML textarea's border style and border color design. There are more different styles that you can match by yourself. Take a look at the themes in the second example, and you will have more experience. The most important thing is to have more Exercise.