# 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的功用