# CSS 7. Attribute Selector

### 回到表單製作頁面：

 <h1>輸入聯絡方式</h1>
    <form action="" method="get">
      <label for="inputName">姓名:</label>
      <input
        placeholder="請輸入您的姓名"
        minlength="3"
        maxlength="10"
        id="inputName"
        name="checkName"
        type="text"
      />
      <br />
      <label for="gender">性別:</label>
      <select name="gender" id="gender" required>
        <option></option>
        <option value="">男性</option>
        <option value="">女性</option>
        <option value="">其他</option>
      </select>
      <br />
      <label for="inputTel">電話:</label>
      <input id="inputTel" name="checkTel" type="text" />
      <br />
      <label for="email">信箱:</label>
      <input id="email" name="checkEmail" type="email" required />
      <br />
      <label for="myAge">年紀:</label>
      <input type="number" name="age" id="myAge" min="18" max="100" required />
      <br />
      <label for="">地區:</label>
      <input list="areaList" name="area" id="area" type="text" />
      <datalist id="areaList">
        <option value="基隆">基隆市</option>
        <option value="台北">台北市</option>
        <option value="新北">新北市</option>
      </datalist>
      <br />
      <label for="suggestion">給網站一個建議</label>
      <br />
      <textarea
        name="suggestion"
        id="suggestion"
        cols="20"
        rows="10"
        placeholder="感謝提供建議"
      ></textarea>
      <br />
      <input
        checked
        type="checkbox"
        value="newspaper"
        name="news"
        id="checkpaper"
        placeholder="在此留下建議"
      />
      <label for="checkpaper">訂閱熊貓電子報</label>
      <br />
      <input type="range" min="0" max="100" step="1" value="" name="" id="" />
      <br />
      <button type="submit">送出</button>
    </form>

### 替 input text 所輸入的文字，都自動套上顏色效果

- `input [tpye="text"]`

input[type="text"] {
  color: rgb(0, 255, 50);
}

### 實作:

 <label for="guardians">我們是富邦悍將你想怎樣?</label>
  <br>
 <input id="guardians" placeholder="留言" type="text">

// CSS:

input[type="text"] {
  color: rgb(0, 0, 255);
  background: gray;
}


###### tags: `2022 網頁開發全攻略教程 / CSS篇章`