→按鈕 : 可選擇自訂class或 使用input[type=submit]
<input class="subscription_btn" type="submit" > input[type=submit] { 樣式 ...省略 } .subscription_btn { 樣式 ...省略 } 個人習慣這個 →搜尋框 / 選項按鈕 →表單placeholder 上網逛逛有看到不錯的範例,點擊時placeholder可以縮小當說明,而非消失。 https://github.com/richardvenneman/floatl 不過他這個需要每多一個欄位就寫一行JS <script type="text/javascript"> new Floatl(document.querySelectorAll('.js-floatl')[0]) new Floatl(document.querySelectorAll('.js-floatl')[1]) new Floatl(document.querySelectorAll('.js-floatl')[2]) 有4格欄位就要寫4個 </script> 下方是另一種 純 CSS 的,個人比較喜歡。如果表單list很長的話,可以用這種。 https://circleci.com/blog/adaptive-placeholders/ 作者的codepen : See the Pen Adaptive Placeholder by Danny King (@dannykingme) on CodePen. See the Pen Liquid Radio Button using SVG and GSAP (GreenSock) by Ryan LaBar (@ryan_labar) on CodePen.
0 評論
發表回覆。 |