The border color and style design of HTML input type text

 The border color and style of HTML input type text can be designed through CSS border-color , border-width and border-style , or directly use CSS border border design method to deal with, these two methods are the same, the difference Only for the application of css grammar, the following examples will use different writing methods as examples.

Example 1: Use border-color, border-width and border-style to design

<input type="text" style="border-color:green;border-width:3px;border-style:dotted;">

Output result

Examples of use in the input type text label style to declare some css start syntax, three in style Communist css syntax, were border-color: green represents the border color is green, border-width: 3px 3px border width of representatives , Border-style:dotted means that the border style is dotted. Each item in the example can be changed to a different design style. For example, the color of border-color can be selected from the " color code table ". , The border-width can be changed to other widths, such as 1px, 6px... etc. The final style can refer to this article: " CSS border-style border style " in the style list.

Example 2: Use border syntax directly to process

<input type="text" style="border:3px green dotted;">

Output result

Example 1 separates the width, color and style of the border to write. Although the expression is very clear, sometimes it seems not so efficient. CSS provides a border syntax that can easily be written in a short way to achieve the same effect. Comparing the grammar of the second example with the grammar of example 1, you can find that the border integrates width, color and style. This writing method can present the same effect, and the efficiency of writing code is also higher. Similarly, each of the borders Projects can be adjusted and modified by themselves.