自訂 HTML 元素樣式

在網頁中各式元素如 按鈕、輸入框 等依照不同的瀏覽器有不同的預設樣式，該如何自訂呢？

我們可以使用 appearance none; 隱藏瀏覽器預設的樣式，然後自訂我們想要的樣子：

    
<style>
    .custom-select {
        appearance: none;
        padding: 0.5em 1em;
        border: 2px solid #333;
        border-radius: 4px;
        background-color: white;
    }
</style>
    

    
    <select class="custom-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    

原始 select： 1 2 3
自訂的 select： 1 2 3

文章撰寫中...請稍後...

參考資料：