logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

Form 表单


基本使用

单选、复选框

radio框中RadioButtonList的宽高都可以根据需要重置的。如下排列方式也可以根据li设置。

<div class="radio-box">
    <ul class="RadioButton">
        <li>
            <div class="RadioButtonList">
                <input type="radio" value="unlimited" name="radio" id="unlimited" checked />
                <label for="unlimited">不限</label>
            </div>
       </li>
        <li>
            <div class="RadioButtonList">
                <input type="radio" value="responsible" name="radio" id="responsible" />
                <label for="responsible">我负责的</label>
            </div>
        </li>       
    </ul>                
</div>                                  
        

以下是radiocheckbox按钮,请根据情况选择适合按钮。按钮大小根据情况自行调节。

<label class="control-checkbox">
    <input type="checkbox" value="" />
    <i class="control-placeholder"></i>
    复选框
</label>
    <label class="control-checkbox control-checkbox-circle">
    <input type="checkbox" value="" />
    <i class="control-placeholder"></i>
    圆形复选框
</label>
    <label class="control-radio">
    <input type="radio" value="" />
    <i class="control-placeholder"></i>
    单选框
</label>
    <label class="control-radio control-radio-square">
    <input type="radio" value="" />
    <i class="control-placeholder"></i>
    方形单选框
</label>
    <label class="control-checkbox control-checkbox-switch">
    <input type="checkbox" value="" />
    <i class="control-placeholder"></i>
    复选框
</label>                                  
        

下拉选择框

<select>是一个比较奇葩的元素,长得丑还不让人给它打扮。select样式配合celllist使用。

<div class="cell">
    <div class="cell-bd">
         <div class="list-box">            
              <div class="list-item cell-select">
                  <dl>
                      <dt class="cell-select-hd padding-none-left">
                        <label>紧急程度</label>
                      </dt>
                      <dd class="cell-select-bd">
                          <select>
                              <option value="1">全部</option>
                              <option value="2">非常紧急</option>
                              <option value="3">紧急</option>
                              <option value="4">普通</option>
                          </select>
                          <i class="fc fc-direction-right"></i>
                     </dd>
                </dl>
              </div>                         
        </div>
    </div>                              
</div>
                

文本搜索框

<div class="list-search-box">
    <div class="list-search-content">
        <form class="list-search-form">
            <div class="list-search-inner">
                <i class="list-search-icon-left fc fc-search"></i>
                <input type="search" class="list-search-input" placeholder="关键字搜索" />
                <i class="list-search-icon-right fc fc-close"></i>
            </div>
        </form>
    <label for="list-search-input" class="list-search-label">
        <span>
            <i class="fc fc-search"></i>
            关键字搜索
        </span>
    </label>
    <a href="#" class="list-search-cancel">取消</a>
    </div>
</div>          
                

文件选择域

<input type="file">也是 CSS 啃不动的一块骨头,如果实在看不惯原生的样式,一般的做法是把文件选择域设为透明那个,覆盖在其他元素。


<span class="comment-uploader-wrapper">
    <label class="comment-uploader-pick">
          <i class="fc fc-attachment icon-size-20"></i>
          <input type="file" />
    </label>
</span>
<br />
<span class="comment-uploader-wraper">
    <label class="comment-uploader-pick">
          <button type="button" class="comment-uploader-pick-btn">
                <i class="fa fa-cloud-upload"></i>
                选择要上传的文件
          </button>
          <input type="file" />
    </label>
</span>                
                

多行文本域

<div class="list-box">
    <div class="list-item">
        <dl>                        
            <dd class="textarea-box">
                <textarea class="textarea" placeholder="对此做一些描述" rows="3"></textarea>
            </dd>
        </dl>
   </div>
</div>            
                

form实例演示

更多form实例请见cellzujian-list.shtml
侧栏导航