如何使用CSS設計出一個表單頁面（附範例）

這篇文章帶給大家的內容是關於如何使用CSS設計出一個表單頁面（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近做專案總是能遇到各種各樣，千奇百怪的需求。用bootstrap等ui框架不能滿足顧客需求。只能開動自己腦筋，自己寫一些樣式。

• 如何調整input樣式（包含placeholder字體樣式）

#

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-align: center;
    color:RGB(154,171,180) !important;
}

• 修改表單項目樣式

• select{
   /*清除select的边框样式*/
      border: none;
   /*清除select聚焦时候的边框颜色*/
      outline: none;
   /*隐藏select的下拉图标*/
      appearance: none;
   /*通过padding-left的值让文字居中*/
      padding-left: 50px;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 370px;
      line-height: 41px;
      height: 41px;
      border-radius: 20px;
      border:1px solid rgba(185,198,203,.5);
      box-shadow: 0 0 2px #ccc;
  }

同理，input、button等表單項目都可以透過這些不常見的屬性來調整。
若想在表單項目實作下列效果則可以：

使用伪类给select添加自己想用的图标
p:after{
    content: "";
    width: 14px;
    height: 8px;
    background: url(img/xiala.png) no-repeat center;
    //通过定位将图标放在合适的位置
    position: absolute;
    right: 20px;
    top: 45%;
    //给自定义的图标实现点击下来功能
    pointer-events: none;
}

還有一個要點，要想使select實作類似placeholder效果,則可以設定selected disabled dispaly:none;

---

<option>选择单位</option>

#總結

這次解決的也不是什麼難題，但是確實會花一點時間，所以我寫下了，好記性不如爛筆頭。 附上

github位址

，留下關於我寫的登入註冊。

#######

以上是如何使用CSS設計出一個表單頁面（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！