我要成為切版魔法師 #4 - HTML 表單樣式變變變

更新於 發佈於 閱讀時間約 2 分鐘

HTML 表單元素像是:

  • <input>
  • <button>
  • <select>
  • <textarea>

要改變表單元素的樣式其實相當麻煩,有些樣式還不能更改,這篇就來探討如何把它們改成喜歡的模樣吧。

<input>

  • 改變提示字的顏色
input::placeholder {
  color: blue;
}
  • 改變輸入框與內容的距離,以及外框顏色
input {
  padding: 8px 12px;
  border: solid 1px #ccc;
}
  • 改變聚焦在輸入框時的外框顏色
input {
  outline: none;
}

input:focus {
  border: solid 1px blue;
}

<button>

  • 取消按鈕的立體外框,改變背景色
button {
  background: #000;
  border: none;
}

<select>

想要替換右方的下拉選單 icon,可以加入以下語法:

select{
  /* 清除預設的 icon */
  appearence: none;

  /* 加入自定義的 icon 圖片 */
  background-image: url(icon.png);
  background-repeat: no-repeat;
  background-size: 16px 12px;
  background-position: right 20px center;
}

目前點擊 <select> 後的 <option> 預設樣式都是不能做修改的,如果要完全自定義樣式的話,就只能使用 div 設計,再手動加入 JS 語法觸發。或是使用套件定義好的樣式會更加快速。

<textarea>

  • textarea 預設可拖曳右下角,伸縮水平和垂直方向的範圍,如果要改變這個設定,可以加入 resize 語法來達到自己想要的效果:
textarea {
/* 預設,可以水平、垂直方向拉伸 */
resize: both;

/* 取消伸縮 */
resize: none;

/* 僅能水平方向拉伸 */
resize: vertical;

/* 僅能垂直方向拉伸 */
resize: horizional;
}

參考資料

留言
avatar-img
留言分享你的想法!
avatar-img
傑米的沙龍
7會員
30內容數
正在一點一滴學習程式,相信知識量總有一天會匯聚成大海,目前專門研究前端中。
傑米的沙龍的其他內容
2023/10/05
一個超簡單就能達到滾動視差的套件 - AOS
Thumbnail
2023/10/05
一個超簡單就能達到滾動視差的套件 - AOS
Thumbnail
2023/10/04
切版有許多眉角需要注意,來探討那些經常導致切版結果與設計稿產生落差的原因。 一、文字的高度本體是 line-height:🔍 文字所佔據的高度不是由font-size決定,而是line-hight。一開始練習切版時,都想著設定好字的尺寸和字重就 ok 了吧?殊不知這是造成切出來的網頁與設計
Thumbnail
2023/10/04
切版有許多眉角需要注意,來探討那些經常導致切版結果與設計稿產生落差的原因。 一、文字的高度本體是 line-height:🔍 文字所佔據的高度不是由font-size決定,而是line-hight。一開始練習切版時,都想著設定好字的尺寸和字重就 ok 了吧?殊不知這是造成切出來的網頁與設計
Thumbnail
2023/10/03
題目:你將會得到一個單詞,你的任務是返回該單詞的中間字符。如果單詞的長度是奇數,則返回中間字符。如果單詞的長度是偶數,則返回中間的兩個字符。
Thumbnail
2023/10/03
題目:你將會得到一個單詞,你的任務是返回該單詞的中間字符。如果單詞的長度是奇數,則返回中間字符。如果單詞的長度是偶數,則返回中間的兩個字符。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
步驟二:表單細節修正 我們延續上一篇EP1,本篇文章要來微調表單上的一些功能,使其更符合操作: 我們發現發文單位、公文類別、會簽單位、審核單位這四個欄位尚未設定正確...
Thumbnail
步驟二:表單細節修正 我們延續上一篇EP1,本篇文章要來微調表單上的一些功能,使其更符合操作: 我們發現發文單位、公文類別、會簽單位、審核單位這四個欄位尚未設定正確...
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Thumbnail
要改變表單元素的樣式其實相當麻煩,有些樣式還不能更改,這篇就來探討如何把它們改成喜歡的模樣吧。
Thumbnail
要改變表單元素的樣式其實相當麻煩,有些樣式還不能更改,這篇就來探討如何把它們改成喜歡的模樣吧。
Thumbnail
這是美化 Notion 的第二章,改變顯示的文字樣式,就可以增加整體的活潑度。 字型 Notion 本來有提供的三種字體,你可以點擊頁面右上方的 “●●●",就能在 Style 中找到 Default、Senf、Mono。 如果你真的想要不一樣的字體,可以參考下面一點的解說。 字體大小
Thumbnail
這是美化 Notion 的第二章,改變顯示的文字樣式,就可以增加整體的活潑度。 字型 Notion 本來有提供的三種字體,你可以點擊頁面右上方的 “●●●",就能在 Style 中找到 Default、Senf、Mono。 如果你真的想要不一樣的字體,可以參考下面一點的解說。 字體大小
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
相信透過之前的介紹,大家對於 CSS 選擇器(CSS selector)已經不陌生了,今天我們要來聊聊兩個在實務上非常好用的偽類(pseudo class )語法,他們分別是 :nth-child() 與 :nth-of-type(),在了解這兩個語法之前,我們首先要先來聊聊什麼是「偽類」呢?
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News