在最新的HTML5中，增加了很多不同的input標籤，讓我們來看看如何透過css來修改美化的樣式。
HTML
<input type=" ">：用來建立表單內的內容。
<input type="text" placeholder="輸入文字" >：placeholder，可搭配text使用，裡面可以出現預設字詞提示網友，網友一旦輸入內容，提示字詞即不見。
CSS
input[type=" "]{輸入css style ...}：修改input標籤裡的css樣式。
參考網站：
CSS Button Generator
CSS CheckBox
<input type=" ">：用來建立表單內的內容。
<input type="text" placeholder="輸入文字" >：placeholder，可搭配text使用，裡面可以出現預設字詞提示網友，網友一旦輸入內容，提示字詞即不見。
CSS
input[type=" "]{輸入css style ...}：修改input標籤裡的css樣式。
參考網站：
CSS Button Generator
CSS CheckBox
HTML INPUT 標籤
在W3School裡面，羅列了一大串可用的HTML INPUT標籤，有興趣的可以點進去看
最常用的大概就是submit了，這是用來製作「按鈕」的，只需要在html當中輸入
<input type="submit">就會有相對應的按鈕產生了
<input type="submit" value="確認">
按鍵就會變成
另外很常用的是text這個指令，也就是建立一個文字框
<input type="text">
就會出現如下的文字框
但就這樣一個框框，網友根本常常搞不清楚狀況，所以我們可以使用placeholder這樣的語法，來增加說明文字，例如我把語法改成：
<input type="text" placeholder="輸入文字" >
這時候，我們的文字框當中就會增加預設的文字，網友一旦點選，這些預設文字就會不見
和剛剛類似，我們也可以在inupt後面放value，但這麼做的話，等於是預先幫網友填好內容，而不是像上面一樣是說明文字。
為input套上css樣式
在預設的input標籤中，大部分的按鍵或文字框都比較單調，但我們一樣可以透過css樣式來裝飾這些標籤。
我們可以使用最常用的方法，直接針對html裡面的標籤去做裝飾，像是這裡我直接針對input去修改它的樣式
<style>
input {padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
</style>
上面這裡，cursor是用來改變滑鼠游標的，這裡設定讓滑鼠移過去的時候，會變成可按的手指游標；border-radius則是用來讓外框變成圓弧狀的語法
這麼做的話，所有的input標籤都會更改樣式，所以我們剛剛的文字框和按鈕會變成這樣
確認的按鈕的確變得可愛多了，但是我不想要連文字框也一起變阿！可以怎麼做呢？
因為在剛剛的地方，我們是選擇所有的input標籤去改變樣式，所以自然連文字框也會改變，如果我想要只改變按鈕的地方，我們需要在input後面加上[type="submit"]，就像這樣：
input[type="submit"]{padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
這樣的意思，就是只針對input裡面的subit按鍵去做修改，呈現的結果就會像這樣：
是不是好看多了呢？
如果你覺得文字框的樣式太不顯眼，你也可以用同樣的方式加以修改，像是這樣：
input[type="text"]{padding:5px 15px; border:2px black solid;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
結果就會變成這樣
是不是清楚多了呢？
這裡還有一些製作按鈕或方框時可以參考的網站：
CSS Button Generator
CSS CheckBox
本次用到的程式碼共包含
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
input[type="submit"]{padding:5px 15px; background:#ccc; border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
input[type="text"]{padding:5px 15px; border:2px black solid;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; }
.demo{
padding-top: 50px;
text-align: center
}
</style>
</head>
<body>
<div class="demo">
<input type="text" placeholder="輸入文字" >
<input type="submit" value="確認">
</div>
</body>
</html>
0 意見:
張貼留言