html有工具栏的输入框,CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）例子...

Font Awesome字体的文章小编前面介绍过一篇教程了，下面我们来看一篇关于CSS3使用Font Awesome字体图标的控件样例(按钮，工具栏，输入框)例子，具体如下所示。

下面是几个带图标的常用组件样例(带图标的按钮，toolBar，还有带图标的帐户密码输入框组件)，其中图标使用的是 Font Awesome 字体图标。Font Awesome字体图标的用法可以查看我前面写的文章：CSS3 - 在html页面中使用Font Awesome字体图标

hangge.com

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333333;

background-color: #ffffff;

}

button,

input,

optgroup,

select,

textarea {

color: inherit;

font: inherit;

margin: 0;

}

a {

color: #21b384;

text-decoration: none;

}

a:hover,

a:focus {

color: #198764;

text-decoration: underline;

}

a:focus {

outline: thin dotted;

outline: 5px auto -webkit-focus-ring-color;

outline-offset: -2px;

}

.btn {

display: inline-block;

margin-bottom: 0;

font-weight: normal;

text-align: center;

vertical-align: middle;

touch-action: manipulation;

cursor: pointer;

background-image: none;

border: 1px solid transparent;

white-space: nowrap;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

border-radius: 4px;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.btn:focus,

.btn:active:focus,

.btn.active:focus,

.btn.focus,

.btn:active.focus,

.btn.active.focus {

outline: thin dotted;

outline: 5px auto -webkit-focus-ring-color;

outline-offset: -2px;

}

.btn:hover,

.btn:focus,

.btn.focus {

color: #333333;

text-decoration: none;

}

.btn:active,

.btn.active {

outline: 0;

background-image: none;

-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

}

#zs#**** 1 ****#fzs#

.btn-danger {

color: #ffffff;

background-color: #d9534f;

border-color: #d43f3a;

}

.btn-danger:focus,

.btn-danger.focus {

color: #ffffff;

background-color: #c9302c;

border-color: #761c19;

}

.btn-danger:hover {

color: #ffffff;

background-color: #c9302c;

border-color: #ac2925;

}

#zs#**** 2 ****#fzs#

.btn-default {

color: #333333;

background-color: #ffffff;

border-color: #cccccc;

}

.btn-default:focus,

.btn-default.focus {

color: #333333;

background-color: #e6e6e6;

border-color: #8c8c8c;

}

.btn-default:hover {

color: #333333;

background-color: #e6e6e6;

border-color: #adadad;

}

.btn-default:active{

color: #333333;

background-color: #e6e6e6;

border-color: #adadad;

}

.btn-sm {

padding: 5px 10px;

font-size: 12px;

line-height: 1.5;

border-radius: 3px;

}

#zs#**** 3 ****#fzs#

.btn-lg {

padding: 10px 16px;

font-size: 18px;

line-height: 1.3333333;

border-radius: 6px;

}

.btn-success {

color: #ffffff;

background-color: #1d9d74;

border-color: #198764;

}

.btn-success:focus,

.btn-success.focus {

color: #ffffff;

background-color: #157254;

border-color: #051c15;

}

.btn-success:hover {

color: #ffffff;

background-color: #157254;

border-color: #0f543e;

}

.btn-success:active {

color: #ffffff;

background-color: #157254;

border-color: #0f543e;

}

#zs#**** 4 ****#fzs#

.btn-group,

.btn-group-vertical {

position: relative;

display: inline-block;

vertical-align: middle;

}

.btn-group > .btn,

.btn-group-vertical > .btn {

position: relative;

float: left;

}

.btn-group > .btn {

position: relative;

float: left;

}

.btn-group .btn .btn,

.btn-group .btn .btn-group,

.btn-group .btn-group .btn,

.btn-group .btn-group .btn-group {

margin-left: -1px;

}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

border-radius: 0;

}

.btn-group > .btn:first-child {

margin-left: 0;

}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {

border-bottom-right-radius: 0;

border-top-right-radius: 0;

}

.btn-group > .btn:last-child:not(:first-child),

.btn-group > .dropdown-toggle:not(:first-child) {

border-bottom-left-radius: 0;

border-top-left-radius: 0;

}

#zs#**** 5 ****#fzs#

.margin-bottom-sm {

margin-bottom: 5px !important;

}

.input-group {

position: relative;

display: table;

border-collapse: separate;

}

.input-group[class*="col-"] {

float: none;

padding-left: 0;

padding-right: 0;

}

.input-group .form-control {

position: relative;

z-index: 2;

float: left;

width: 100%;

margin-bottom: 0;

}

.input-group-addon,

.input-group-btn,

.input-group .form-control {

display: table-cell;

}

.input-group-addon:not(:first-child):not(:last-child),

.input-group-btn:not(:first-child):not(:last-child),

.input-group .form-control:not(:first-child):not(:last-child) {

border-radius: 0;

}

.input-group-addon,

.input-group-btn {

width: 1%;

white-space: nowrap;

vertical-align: middle;

}

.input-group-addon {

padding: 6px 12px;

font-size: 14px;

font-weight: normal;

line-height: 1;

color: #555555;

text-align: center;

background-color: #eeeeee;

border: 1px solid #cccccc;

border-radius: 4px;

}

.input-group .form-control:first-child,

.input-group-addon:first-child,

.input-group-btn:first-child > .btn,

.input-group-btn:first-child > .btn-group > .btn,

.input-group-btn:first-child > .dropdown-toggle,

.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),

.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {

border-bottom-right-radius: 0;

border-top-right-radius: 0;

}

.input-group-addon:first-child {

border-right: 0;

}

.input-group .form-control:last-child,

.input-group-addon:last-child,

.input-group-btn:last-child > .btn,

.input-group-btn:last-child > .btn-group > .btn,

.input-group-btn:last-child > .dropdown-toggle,

.input-group-btn:first-child > .btn:not(:first-child),

.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {

border-bottom-left-radius: 0;

border-top-left-radius: 0;

}

.input-group-addon:last-child {

border-left: 0;

}

.form-control {

display: block;

width: 100%;

height: 34px;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

color: #555555;

background-color: #ffffff;

background-image: none;

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;

-o-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,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

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

}

.form-control::-moz-placeholder {

color: #999999;

opacity: 1;

}

.form-control:-ms-input-placeholder {

color: #999999;

}

.form-control::-webkit-input-placeholder {

color: #999999;

}

.form-control::-ms-expand {

border: 0;

background-color: transparent;

}

Delete

Settings

Font Awesome
Version 4.5.0

您可能感兴趣的文章：