This article mainly introduces in detail the techniques of beautifying form controls with CSS3, beautifying drop-down controls, radio buttons, and check boxes. Interested friends can refer to the default controls of
The styles are different in different browsers and the user experience is poor. CSS3 can be used to beautify form controls and provide a better user experience. The downside is browser compatibility issues.
1. Drop-down control
Rendering:
The layout structure of the drop-down control:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
ul is used to simulate a drop-down list. During actual use, it can be dynamically generated based on the data returned from the background. The p element is used to render the selected option.
Core style:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
|
This is just a static style. If you want to implement the "selection" process, you need to use JavaScript to achieve it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
2. Beautify the radio button box
lable tag can be linked with the radio button box through the for attribute. We use this feature to beautify the radio button, which is also the principle. Also, don’t forget to hide the real radio button (type="radio").
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
Final effect:
##3. Beautify the check box
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Three ways to verify CSS control styles through priority comparison
About CSS banner image response Method for centered display
How to use negative margin values in CSS to adjust the center position
The above is the detailed content of About CSS3 controls for beautifying forms. For more information, please follow other related articles on the PHP Chinese website!