寫出一個美觀的表單頁

zhangwang 發布于2019-08-23 13:39 / 1253人閱讀

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

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

前言

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

如何調整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的下拉圖標*/
    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等表單項都可以通過這些不常見的屬性調整。

若想在表單項實現如下效果則可以：

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

還有一個要點，要想使select實現類似placeholder效果,則可以設置selected disabled dispaly:none;

總結

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

云服務器 GPU云服務器 html表單美觀用jsp寫出一個日歷 html 美觀的表格 asp在同一個頁修改

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99332.html

寫出一個美觀的表單頁

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

GHOST_349178 2019-08-02 12:06 評論0 收藏0
寫出一個美觀的表單頁

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

jerryloveemily 2019-08-29 17:23 評論0 收藏0
四個步驟實現層級清晰的導航欄

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

Keagan 2019-05-29 17:49 評論0 收藏0
如何在寫出高質量的文章

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

svtter 2019-07-31 12:22 評論0 收藏0