Shulou(Shulou.com)06/01 Report--

Editor to share with you how CSS designed a form page, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

/ * placeholder font color * /

::-webkit-input-placeholder {/ * WebKitbrowsers*/

Text-align:center

Color:RGB (154171180)

}

:-moz-placeholder {/ * MozillaFirefox4to18*/

Text-align:center

Color:RGB (154171180)

}

::-moz-placeholder {/ * MozillaFirefox19+*/

Text-align:center

Color:RGB (154171180); opacity:1

}

:-ms-input-placeholder {/ * InternetExplorer10+*/

Text-align:center

Color:RGB 154171180! important

}

Modify the form item style

Select {

/ * clear the border style of select * /

Border:none

/ * clear the border color when select is focused * /

Outline:none

/ * hide the drop-down icon of select * /

Appearance:none

/ * Center the text through the value of padding-left * /

Padding-left:50px

-webkit-appearance:none

-moz-appearance:none

Width:370px

Line-height:41px

Height:41px

Border-radius:20px

Border:1pxsolidrgba (185, 198, 203, 5)

Box-shadow:002px#ccc

}

Similarly, input, button, and other form items can be adjusted through these unusual properties.

If you want to achieve the following effect in the form item:

Use pseudo-classes to add the icons you want to select

P:after {

Content: ""

Width:14px

Height:8px

Background:url (img/xiala.png) no-repeatcenter

/ / place the icon in the appropriate location by positioning

Position:absolute

Right:20px

Top:45%

/ / realize the click-down function for the custom icon

Pointer-events:none

}

The above is all the content of the article "how CSS designs a form page". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.