国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

寫出一個美觀的表單頁

jerryloveemily / 2023人閱讀

摘要：如何寫出一個美觀的表單頁前言最近做項目總能遇到各種各樣，千奇百怪的需求。只能開動自己腦筋，自己寫一些樣式。附下我的地址，留下關(guān)于我寫的登錄注冊。

如何寫出一個美觀的表單頁

前言

最近做項目總能遇到各種各樣，千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開動自己腦筋，自己寫一些樣式。

如何調(diào)整input樣式（包括placeholder字體樣式）

/*placeholder字體顏色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-align: center;
    color:RGB(154,171,180) !important;
}

修改表單項樣式

select{
 /*清除select的邊框樣式*/
    border: none;
 /*清除select聚焦時候的邊框顏色*/
    outline: none;
 /*隱藏select的下拉圖標(biāo)*/
    appearance: none;
 /*通過padding-left的值讓文字居中*/
    padding-left: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 370px;
    line-height: 41px;
    height: 41px;
    border-radius: 20px;
    border:1px solid rgba(185,198,203,.5);
    box-shadow: 0 0 2px #ccc;
}

同理，input、button等表單項都可以通過這些不常見的屬性調(diào)整。

若想在表單項實現(xiàn)如下效果則可以：

使用偽類給select添加自己想用的圖標(biāo)
div:after{
    content: "";
    width: 14px;
    height: 8px;
    background: url(img/xiala.png) no-repeat center;
    //通過定位將圖標(biāo)放在合適的位置
    position: absolute;
    right: 20px;
    top: 45%;
    //給自定義的圖標(biāo)實現(xiàn)點(diǎn)擊下來功能
    pointer-events: none;
}

還有一個要點(diǎn)，要想使select實現(xiàn)類似placeholder效果,則可以設(shè)置selected disabled dispaly:none;

總結(jié)

這次解決的也不是什么難題，但是確實會花費(fèi)一點(diǎn)時間，所以我寫下了，好記性不如爛筆頭。
附下我的github地址，留下關(guān)于我寫的登錄注冊。
鏈接描述

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114286.html

相關(guān)文章

  • 寫出一個美觀的表單頁

    摘要：如何寫出一個美觀的表單頁前言最近做項目總能遇到各種各樣，千奇百怪的需求。只能開動自己腦筋，自己寫一些樣式。附下我的地址，留下關(guān)于我寫的登錄注冊。 如何寫出一個美觀的表單頁 前言 最近做項目總能遇到各種各樣，千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開動自己腦筋，自己寫一些樣式。 如何調(diào)整input樣式（包括placeholder字體樣式） /*placeho...

    zhangwang 評論0 收藏0

  • 寫出一個美觀的表單頁

    摘要：如何寫出一個美觀的表單頁前言最近做項目總能遇到各種各樣，千奇百怪的需求。只能開動自己腦筋，自己寫一些樣式。附下我的地址，留下關(guān)于我寫的登錄注冊。 如何寫出一個美觀的表單頁 前言 最近做項目總能遇到各種各樣，千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開動自己腦筋，自己寫一些樣式。 如何調(diào)整input樣式（包括placeholder字體樣式） /*placeho...

    GHOST_349178 評論0 收藏0

  • 四個步驟實現(xiàn)層級清晰的導(dǎo)航欄

    摘要：在各個著陸頁上，你可以放上重點(diǎn)作品有說服力的銷售文案服務(wù)特點(diǎn)列表客戶推薦信以及清晰的行為召喚按鈕。除了放在著陸頁的正文位置，筆者建議還可以在標(biāo)題導(dǎo)航欄再放一個。 【編者按】本文作者為 Wes McDowell，主要介紹通過四個步驟實現(xiàn)層級清晰的導(dǎo)航欄，進(jìn)而提高網(wǎng)站的轉(zhuǎn)化率。文章系國內(nèi) ITOM 管理平臺 OneAPM 編譯呈現(xiàn)。 精心規(guī)劃的導(dǎo)航策略可以成就一個網(wǎng)站，反之，則可能毀了一個...

    Keagan 評論0 收藏0

  • 如何在寫出高質(zhì)量的文章

    摘要：高質(zhì)量的文章意義在于看得懂，看得爽，能學(xué)到東西。高質(zhì)量的文章往往都是由淺入深，娓娓道來，而不是一出來就上代碼。 showImg(https://segmentfault.com/img/bVBXvC); 許多文章內(nèi)容還有的還行，可是排版方面似乎有點(diǎn)弱。我分析了人氣比較高的文章，總結(jié)了這篇文章。如有不妥，還請指出來。 高質(zhì)量的文章意義在于看得懂，看得爽，能學(xué)到東西。 格式套路 showI...

    svtter 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<