成品圖：
之前一直以為要用定位(position)的方法才能完成，直到今天在六角 slack 群看到回覆才學到
原來如此簡單。
首先基本的 HTML ，其中 all.css 是 FontAwesome 的資料夾裡面的 all.css ， style 則是
自訂等等放其他設定的 CSS 檔案。
基礎表單設定，外面加個框避免太大太奇怪而已，一般的輸入框也就300-500px足以，<form>、
<button>、<input>標籤是表單的基礎內容。
placeholder="icon" 裡面是框框底下的提示字，一般就是請輸入XX或輸入N-M位數字之類的，
class 因為是簡單的例子就照位置隨便取。
<i class="fab fa-accusoft"></i> 是FontAwesome的圖案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="formWidth">
<form class="form">
<button type="button" class="button"><i class="fab fa-accusoft"></i></button>
<input placeholder="icon" type="text" class="input">
</form>
</div>
</body>
</html>
.formWidth{
width: 300px;
}
.form{
display: flex;
margin: 0 10px 50px;
border-radius: 100px;
border: 1px solid #000;
}
.button{
width:15%;
border: none;
background-color: transparent;
padding: 5px 10px;
}
.input{
width:85%;
border: none;
padding: 5px 10px;
background-color: transparent;
}
input:focus,
button:focus {
outline: none;
}
一、 display:flex將上下排列的<input>跟<button>排成橫線。
如果還是兩行先做完兩步再檢討
二、 調整比例 width 跟 padding 、 magin。
三、 設定圓角跟框線：
border-radius: 100px;
border: 1px solid #000;
四、 將<input>跟<button>背景設成透明：
因為框線是由最外層產生的，因此裡面的兩個背景會吃掉部分框線，所以要設成透明避免蓋住框線。
五、 :focus效果：
focus 效果是滑鼠點一下之後會在外圍有一個框框跟一根的指示條告訴使用者現在正在輸入或點擊的
欄位，但在此因為是外層是圓的，內圈一點之下沒改過方方的外型就露餡了，所以要改成 none。
參考資料：https://hsuchihting.github.io/css/20200723/3601848445/
沒有留言:
張貼留言