1. 程式人生 > >input樣式重置(outline:none)

input樣式重置(outline:none)

我們在寫表單的時候,經常需要自定義表單的樣式,當然input輸入框也不例外,那麼如何能寫出好看一點的輸入框呢?

     例如簡單的三個空按鈕: 

      <input type="button" id="btn1">
      <input type="button" id="btn2">
      <input type="button" id="btn3">

     來個簡單的樣式:

      width: 50px;
      height: 50px;
      border-radius:50%;

    執行如下圖顯示的(各個瀏覽器之間預設樣式有所差距):

      

   所以,首先要將input輸入框的預設樣式去掉(讓其在任何地方顯示的一樣):

      border:0;

      outline:none;

   再看效果:

       ;

    這樣就ok啦;