CSS Custom - Input element

tags: HTML-CSS

前言

• 這邊文章將淺談form內常見元素的預設css，和基本美化這些元素的方法。
• 注意這些元素多為inline，這邊先說的是單一元素的美化，而多個元素形成的表單，就是排版的問題了。
• 整個表單的排版也可以視為card的排版。

一 . input : text

(一) . 預設樣式

• 預設形式 ：
  1. 黑色邊框 ： 就是border屬性。
  2. focus時有藍色邊框 ： outline屬性。
     
     
     
     
• 消除預設屬性 ：
  1. 將border屬性消除。
  2. 將outline屬性消除。

border: none;
outline : none;

(二) . 基本改變 : css屬性的影響

1. Boxing屬性 ：
   • width和height直接影響大小，有預設的大小，不用元素撐開。
   • padding為輸入的文字和border的距離，input會被padding撐開。
   • margin 一樣。
2. text屬性 ：
   • text-align改變的為輸入文字的開始處。
   • font-size也是改變輸入文字的大小。
3. 簡單例子 ：
   • 邊框改變大小。
   • 加上padding。
     
     

.myinput{
  padding: 10px;
  
  border : solid .1px black;
  border-radius: 35px;
  background-color :  #fff;
  
  outline:none;
}

二 . Select

(一) . 預設樣式 (基本上和text差不多)

• 預設形式 ：

  1. 黑色邊框 ： 就是border屬性。
  2. focus時有藍色邊框 ： outline屬性。
     
     

• 消除預設屬性 ：

  1. 將border屬性消除。
  2. 將outline屬性消除。

border: none;
outline : none;

(二) . 基本改變 : css屬性的影響 (基本上和text差不多)

1. Boxing屬性 ：
   • width和height直接影響大小。
   • padding為option的文字和border的距離，input會被padding撐開。
   • margin 一樣。

• 註 ： select沒有設定width下，寬度為最大的option內文。

2. text屬性 ：
   • text-align無法改變option的位置。
   • font-size也是改變option文字的大小。
3. 簡單例子 ：
   • 邊框改變大小。
   • 加上padding。
     
     

.myselect{
    width: 100px;
    padding: 5px;


    border-radius: 35px;
    border: 1px solid black;

    outline: none;
}

三 . Input : submit

(一) . 預設樣式

• 預設樣式
  1. 黑色邊框 ： 就是border屬性。
  2. 沒有常見的outline屬性，但有預設的灰色背景。
  3. submit button中的文字是由value屬性決定的。
• 消除預設屬性 ：
  1. 將border屬性消除。
  2. 設定value屬性。
     
     

(二) . 基本改變

1. Boxing屬性 ：
   • width和height直接影響大小。
   • padding為value的文字和border的距離，input會被padding撐開。
   • margin 一樣。
2. text屬性 ：
   • text-align改變value文字出現的位置，預設為center。
   • font-size也是改變option文字的大小。
   • letter-spacing改變value文字。
3. 簡單例子 ：
   • 邊框改變大小。
   • 加上padding。
     
     

四 . Input : textarea

(一) . 預設樣式

• 預設形式 ：
  1. 黑色邊框 ： 就是border屬性。
  2. focus時有藍色邊框 ： outline屬性。
  3. resize屬性 ： 讓文字輸入框可以自由切換大小。
  4. 可以設定row和col的屬性，效果和width和height差不多。
• 消除預設屬性 ：
  1. 將border屬性消除。
  2. 將outline屬性消除。
  3. 將resize屬性消除。
     
     
     
     

(二) . 基本改變

1. Boxing屬性 ：
   • width和height直接影響大小。
   • padding為輸入文字和border的距離，會被padding撐開。
   • margin 一樣。
2. text屬性 ：
   • text-align改變輸入文字出現的位置，預設為center。
   • font-size也是改變輸入文字的大小。
   • letter-spacing改變輸入文字。
3. resize屬性 ：
   • 設為none時，會禁止延伸大小。
   • 還有其他屬性可以設定，會直接影響延伸時的方向。
4. 簡單例子 ：
   • 邊框改變大小。
   • 加上padding。

五 . Input : File

(一) . 預設屬性

六 . Label的功用