摘要:如何寫(xiě)出一個(gè)美觀的表單頁(yè)前言最近做項(xiàng)目總能遇到各種各樣,千奇百怪的需求。只能開(kāi)動(dòng)自己腦筋,自己寫(xiě)一些樣式。附下我的地址,留下關(guān)于我寫(xiě)的登錄注冊(cè)。
如何寫(xiě)出一個(gè)美觀的表單頁(yè)
前言
最近做項(xiàng)目總能遇到各種各樣,千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開(kāi)動(dòng)自己腦筋,自己寫(xiě)一些樣式。
如何調(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; }
修改表單項(xiàng)樣式
select{ /*清除select的邊框樣式*/ border: none; /*清除select聚焦時(shí)候的邊框顏色*/ outline: none; /*隱藏select的下拉圖標(biāo)*/ appearance: none; /*通過(guò)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等表單項(xiàng)都可以通過(guò)這些不常見(jiàn)的屬性調(diào)整。
若想在表單項(xiàng)實(shí)現(xiàn)如下效果則可以:
使用偽類給select添加自己想用的圖標(biāo) div:after{ content: ""; width: 14px; height: 8px; background: url(img/xiala.png) no-repeat center; //通過(guò)定位將圖標(biāo)放在合適的位置 position: absolute; right: 20px; top: 45%; //給自定義的圖標(biāo)實(shí)現(xiàn)點(diǎn)擊下來(lái)功能 pointer-events: none; }
還有一個(gè)要點(diǎn),要想使select實(shí)現(xiàn)類似placeholder效果,則可以設(shè)置selected disabled dispaly:none;
總結(jié)
這次解決的也不是什么難題,但是確實(shí)會(huì)花費(fèi)一點(diǎn)時(shí)間,所以我寫(xiě)下了,好記性不如爛筆頭。
附下我的github地址,留下關(guān)于我寫(xiě)的登錄注冊(cè)。
鏈接描述
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/53334.html
摘要:如何寫(xiě)出一個(gè)美觀的表單頁(yè)前言最近做項(xiàng)目總能遇到各種各樣,千奇百怪的需求。只能開(kāi)動(dòng)自己腦筋,自己寫(xiě)一些樣式。附下我的地址,留下關(guān)于我寫(xiě)的登錄注冊(cè)。 如何寫(xiě)出一個(gè)美觀的表單頁(yè) 前言 最近做項(xiàng)目總能遇到各種各樣,千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開(kāi)動(dòng)自己腦筋,自己寫(xiě)一些樣式。 如何調(diào)整input樣式(包括placeholder字體樣式) /*placeho...
摘要:如何寫(xiě)出一個(gè)美觀的表單頁(yè)前言最近做項(xiàng)目總能遇到各種各樣,千奇百怪的需求。只能開(kāi)動(dòng)自己腦筋,自己寫(xiě)一些樣式。附下我的地址,留下關(guān)于我寫(xiě)的登錄注冊(cè)。 如何寫(xiě)出一個(gè)美觀的表單頁(yè) 前言 最近做項(xiàng)目總能遇到各種各樣,千奇百怪的需求。用bootstrap等ui框架不能滿足客戶需求。只能開(kāi)動(dòng)自己腦筋,自己寫(xiě)一些樣式。 如何調(diào)整input樣式(包括placeholder字體樣式) /*placeho...
摘要:在各個(gè)著陸頁(yè)上,你可以放上重點(diǎn)作品有說(shuō)服力的銷售文案服務(wù)特點(diǎn)列表客戶推薦信以及清晰的行為召喚按鈕。除了放在著陸頁(yè)的正文位置,筆者建議還可以在標(biāo)題導(dǎo)航欄再放一個(gè)。 【編者按】本文作者為 Wes McDowell,主要介紹通過(guò)四個(gè)步驟實(shí)現(xiàn)層級(jí)清晰的導(dǎo)航欄,進(jìn)而提高網(wǎng)站的轉(zhuǎn)化率。文章系國(guó)內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)。 精心規(guī)劃的導(dǎo)航策略可以成就一個(gè)網(wǎng)站,反之,則可能毀了一個(gè)...
摘要:高質(zhì)量的文章意義在于看得懂,看得爽,能學(xué)到東西。高質(zhì)量的文章往往都是由淺入深,娓娓道來(lái),而不是一出來(lái)就上代碼。 showImg(https://segmentfault.com/img/bVBXvC); 許多文章內(nèi)容還有的還行,可是排版方面似乎有點(diǎn)弱。我分析了人氣比較高的文章,總結(jié)了這篇文章。如有不妥,還請(qǐng)指出來(lái)。 高質(zhì)量的文章意義在于看得懂,看得爽,能學(xué)到東西。 格式套路 showI...
閱讀 1785·2023-04-26 00:47
閱讀 1543·2021-11-11 16:55
閱讀 2597·2021-09-27 14:04
閱讀 3548·2021-09-22 15:58
閱讀 3554·2021-07-26 23:38
閱讀 2129·2019-08-30 13:47
閱讀 1979·2019-08-30 13:15
閱讀 1142·2019-08-29 17:09