控件 | Gschool

控件是用于和用户交互的基本单元，用户可以和控件进行交互以输入或操作数据。控件的种类很多，本系统有用到输入框、禁用框、多行文本框、复选框、下拉控件、日期控件、联想控件等。

样例

输入框

css配置

.form .input{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;color:#555;display:block;font-size:12px;height:24px;line-height:24px;padding:0px 8px;width:81%;}

.form .input{width:100%;}

说明

背景颜色#fff；不用背景图片；描边1像素、实线、颜色#ccc;圆角4像素；投影左边0、上边1像素、模糊程度1像素、内投影；颜色#555；块级元素；字体大小12像素；高24像素；行高24像素；左右边距8像素；宽度81%；

输入框宽度100%

禁用框

css配置

.form .input-gray{background-color:#f0efef;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;color:#555;display:block;font-size:12px;height:24px;line-height:24px;;padding:0px 8px;width:81%;}

.form .input-gray{width:100%;}

说明

背景颜色#f0efef；不用背景图片；描边1像素、实线、颜色#ccc;圆角4像素；投影左边0、上边1像素、模糊程度1像素、内投影；颜色#555；块级元素；字体大小12像素；高24像素；行高24像素；左右内边距8像素；宽度81%；

禁用框宽度100%

多行文本框

css配置

textarea{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;color:#555;display:block;font-size:12px;height:50px;line-height:26px;;padding:0px 0px;width:92.5%;}

说明

背景颜色#fff；不用背景图片；描边1像素、实线、颜色#ccc;圆角4像素；投影左边0、上边1像素、模糊程度1像素、内投影；颜色#555；块级元素；字体大小12像素；高50像素；行高26像素；内边距0像素；宽度92.5%；

复选框

css配置

.form .check{padding:17px 0px 10px 0px;}

.check input{vertical-align:middle;margin-right:4px;}

.checkbox-inline input{vertical-align:middle;margin-right:4px;}

说明

内边距上17像素；下10像素；

水平居中显示、外边距右4像素

下拉框

css配置

.form-dorpdown .form-text{width:100%;}

a, a:link{font-size:12px;color:#787878;font-family:”宋体”;}

.dropdown-menu{box-shadow:0px 3px 6px rgba(0, 0, 0, 0.176);background-color:#fff;}

.form-dorpdown > .btn {background-color:#fff;}

.fi:before {font-size:50%;}

.dropdown-menu > li:hover{backgroud-color:#35a0e7;}

.fi-caret:before{content: “\e606”;}

.form-dorpdown-menu > li{border:0px;}

.form-dorpdown-menu > li>a {color:#7f807e;padding-left:17px;}

.form-dorpdown .dropdown-menu > li > a:hover {color:#fff;background-color:#35a0e7;text-decoration:none;}

.form-dorpdown .dropdown-menu {border:1px solid #72b6e3;}

说明

下拉框宽度100%

下拉框内文字大小12像素、颜色#787878、宋体

下拉框投影设置、背景颜色#fff

下拉箭头背景颜色#fff

下拉箭头字体大小50%

背景颜色#35a0e7

下拉箭头字体图标\e606

每行li不描边

文字颜色#7f807e、内边距左17像素

选中文字颜色#fff、背景颜色#35a0e7、没有下划线

描边1像素、实线、颜色#72b6e3;

日期控件

css配置

form-date{display：inline-block;width:100%;}

.form-date >.btn {padding: 0px 0px;vertical-align:middle;}

.dropdown-menu{font-size:12px;}

.form-date-yearmonth > .btn, .form-date-bar > .btn {padding-left:15px;padding-right:15px;}

.form-date-year {padding:1px 5px;border-left: 1px solid #CFCFCF;}

arrow-right{border-width: 8px 8px 8px 0px;border-color: transparent #cecece transparent transparent;}

.arrow-left{border-width:8px 0px 8px 8px;border-color:transparent transparent transparent #cecece;}

.form-date-year .form-text {font-size:14px;}

.date-year-input {margin:2px 10px 2px 10px;}

form-date-month {border-right:1px solid #CFCFCF;}

.form-date-bar {padding:0px 0px;}

.form-date-days td[selected], .form-date-days td:hover {background-color:#2AA1D3;border:1px solid #2AA1D3;border-radius:0px;padding:0px;color:#fff;}

.form-date-days{padding:0px 2px 2px;}

说明

暂无

日期控件文字大小12像素

箭头距离左边15像素、距离右边15像素

年份内边距上下1像素、左右5像素、左描边1像素；

右箭头大小，颜色

年份字体大小14像素

年份外边距上2像素、右10像素、下2像素、左10像素

月份右描边

暂无

选中日期背景颜色#2AA1D3、颜色#fff

边框内边距即粗细设置

联想控件

css配置

.form select{background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;color:#555;display:block;font-size:12px;height:24px; line-height:24px;padding:0px 0px;width:81%;}

.form-text{width:100%;padding:3px 9px;font-size:12px;}

说明

背景颜色#fff、无背景图片、描边1像素、实线、描边颜色#ccc、圆角4像素、投影设置、颜色#555、将元素显示为块级颜色、总是在新行上开始、字体大小12像素、高24像素

框宽度100%、内边距上下3像素、左右9像素、字体大小12像素