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

This article introduces you how to build a web text box style that looks comfortable and worth learning. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

A more comfortable text box style, the key points are in the yellow background.

The code is as follows:

. form-control {

Display: block

Width: 100%

Height: 34px

Padding: 6px 12px

Font-size: 14px

Line-height: 1.428571429

Color: # 555555

Vertical-align: middle

Background-color: # ffffff

Border: 1px solid # cccccc

Border-radius: 4px

-webkit-box-shadow: inset 0 1px 1px rgba (0,0,0,0.075)

Box-shadow: inset 0 1px 1px rgba (0,0,0,0.075)

-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s

Transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s

}

. form-control:focus {

Border-color: # 66afe9

Outline: 0

-webkit-box-shadow: inset 0 1px 1px rgba (0 8px rgba 0, 075), 0 0 8px rgba (102,175,233,0.6)

Box-shadow: inset 0 1px 1px rgba, 0 8px rgba (102,175,233,0.6)

}

About a more comfortable and worth learning web text box style is how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.