html表单应用图片,在表单(FORM)中使用图片的例子

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

.container {

padding: 1em;

}

form {

margin: 30px auto;

width: 300px;

}

input {

display: block;

margin-bottom: 1em;

background-size: 1.2em;

background-repeat: no-repeat;

background-position: 2% 50%;

transition: all ease-in-out 300ms;

}

input:focus {

outline: 0 !important;

box-shadow: 0 0 3px 1px red;

}

input[name="name"] {

background-image: url("http://www.marketingextremist.com/wp-content/uploads/2014/05/How-to-Change-a-Username-in-WordPress.jpg");

}

input[name="email"] {

background-image: url("https://conceptdraw.com/a2623c3/p22/preview/640/pict--mail-app-icons-vector-stencils-library");

}

input[name="site"] {

background-image: url("http://blog.harbinger-systems.com/images/Apps-Home-icon.png");

}

.btn-submit,

input {

padding: .5em 2em;

border: 1px solid #777;

border-radius: .3em;

font-size: 1.2em;

}

.btn-submit:focus,

input:focus {

outline: 0 !important;

box-shadow: 0 0 3px 2px lightblue;

}