仿照Bootstrap的input 修改 upload上傳圖檔的樣式

html：

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>label</code> <code>class</code><code>=</code><code>"col-sm-3 col-sm-6 control-label"</code><code>&gt;圖檔&lt;/</code><code>label</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"problem-must"</code><code>&gt; &lt;/</code><code>span</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"col-sm-8"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>a</code> <code>class</code><code>=</code><code>"fb-upload"</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code><code>&gt; </code>

<code>            </code><code>&lt;</code><code>input</code> <code>class</code><code>=</code><code>"form-control"</code> <code>name</code><code>=</code><code>"pic"</code> <code>type</code><code>=</code><code>"file"</code> <code>accept</code><code>=</code><code>".gif,.jpg,.png,.jpeg"</code> <code>/&gt; </code>

<code>            </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"fb-img"</code><code>&gt;上傳圖檔&lt;/</code><code>span</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

css:

<code>.form-group input[type=</code><code>"file"</code><code>] {</code>

<code>    </code><code>cursor</code><code>: </code><code>pointer</code><code>;</code>

<code>    </code><code>opacity: </code><code>0</code><code>;</code>

<code>    </code><code>position</code><code>: </code><code>absolute</code><code>;</code>

<code>    </code><code>top</code><code>: </code><code>0</code><code>;</code>

<code>}</code>

<code>.fb-img {</code>

<code>    </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#ccc</code><code>;</code>

<code>    </code><code>border-radius: </code><code>4px</code><code>;</code>

<code>    </code><code>box-shadow: </code><code>0</code> <code>1px</code> <code>1px</code> <code>rgba(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>0.075</code><code>) </code><code>inset</code><code>;</code>

<code>    </code><code>color</code><code>: </code><code>gray</code><code>;</code>

<code>    </code><code>display</code><code>: inline-</code><code>block</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>34px</code><code>;</code>

<code>    </code><code>line-height</code><code>: </code><code>1.42857</code><code>;</code>

<code>    </code><code>padding</code><code>: </code><code>6px</code> <code>12px</code><code>;</code>

<code>    </code><code>text-align</code><code>: </code><code>left</code><code>;</code>

<code>    </code><code>transition: border-color </code><code>0.15</code><code>s ease-in-out </code><code>0</code><code>s, box-shadow </code><code>0.15</code><code>s ease-in-out </code><code>0</code><code>s;</code>

<code>    </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code></code>

本文轉自 愛笑嘚蛋蛋 51CTO部落格，原文連結：http://blog.51cto.com/dd118/1868944，如需轉載請自行聯系原作者