How to build a web text box style that looks comfortable and worth learning
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.
