關(guān)于placeholder

placeholder在鼠標(biāo)移入時(shí)消失

/* WebKit browsers */

input:focus::-webkit-input-placeholder { color:transparent; }

/* Mozilla Firefox 4 to 18 */

input:focus:-moz-placeholder { color:transparent; }

/* Mozilla Firefox 19+ */

input:focus::-moz-placeholder { color:transparent; }

/* Internet Explorer 10+ */

input:focus:-ms-input-placeholder { color:transparent; }

placeholder文字樣式

/*修改placeholder*/

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

? ? color: #999;

}

input:-moz-placeholder, textarea:-moz-placeholder {

? ?? color: #999;

}

input::-moz-placeholder, textarea::-moz-placeholder {

? ? color: #999;

}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {

? ? color: #999;

}

? 超鏈接的幾種狀態(tài)(順序如下:l-v-h-a)

a:link{text-decoration:none;}? /* 指正常的未被訪問過的鏈接*/

a:visited{text-decoration:none;}/*指已經(jīng)訪問過的鏈接*/

a:hover{text-decoration:none;}/*指鼠標(biāo)在鏈接*/

a:active{text-decoration:none;}/* 指正在點(diǎn)的鏈接*/

外陰影

-moz-box-shadow:2px 2px 5px #333333;

? ? ? -webkit-box-shadow:2px 2px 5px #333333;

box-shadow:2px 2px 5px #333333;

更改復(fù)選框樣式

/*最初狀態(tài)*/

input[type=checkbox]{

? ? ? position:relative;

? ? ? width:20px;

? ? ? height: 20px;

? ? }

? /*用前置內(nèi)容生成的方式附圖*/

? ? input[type=checkbox]::before{

? ? ? content:'';

? ? ? position:absolute;

? ? ? width:20px;

? ? ? height:20px;

? ? ? background:url('images/ungou.jpg') no-repeat;

? ? }

/*點(diǎn)選后,更改前置內(nèi)容生成時(shí)的圖片即可*/

? ? input[type=checkbox]:checked::before{

? ? ? background:url('images/gou.jpg') no-repeat;

? ? ? content:'';

? ? }?

border-radius

.boder-radius{

? ? -webkit-border-radius:6px;//適配以webkit為核心的瀏覽器(chrome、safari等)? ? -moz-border-radius:6px;//適配firefox瀏覽器? ? -ms-border-radius:6px;//適配IE瀏覽器? ? -o-border-radius:6px;//適配opera瀏覽器? ? border-radius:6px;//適配所有瀏覽器(需要放在最后面,類似于if..else if..else..)}

透明度的兼容性問題(兼容ie8和ie9)

opacity: 0.5;filter: alpha(opacity = 50);

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、垂直對(duì)齊 如果你用CSS,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,311評(píng)論 0 11
  • 這篇文字里我會(huì)介紹50 個(gè)便于使用的 CSS2/CSS3 代碼片段給所有的WEB專業(yè)人員. 選擇IDE開發(fā)環(huán)境來存...
    JamHsiao_aaa4閱讀 1,864評(píng)論 0 3
  • 大家對(duì)于placeholder都不陌生,HTML5新增的屬性,輸入框?yàn)榭諘r(shí)顯示一些提示信息,輸入框得焦時(shí),這些提示...
    晴天小豬L閱讀 3,749評(píng)論 0 1
  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,992評(píng)論 0 8
  • 你啊,總愛錯(cuò)人,對(duì)得起自己?jiǎn)?一輩子太漫長(zhǎng) 從懵懂少年到青春流逝 接著就是人到中年 隨之而來的就是我們不得不接受必...
    七月和安生的日子閱讀 479評(píng)論 0 0

友情鏈接更多精彩內(nèi)容