→按鈕 : 可選擇自訂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 評論
看到有網站用這招,不過感覺是某個套件寫的,看了CSS想說自己也出來試看看。
內嵌YOUTUBE影片(iframe)後,在上面蓋一層圖片,圖片設透明度0.7左右 目前缺點 : 右下YOUTUBE會曝光 影片寬度沒有100% 視窗寬度拉窄之後,影片是垂直置中在100vh的容器裡@_@,怪怪的哩 還要再修改 See the Pen youtube vedio iframe+image by jing (@jing-jing) on CodePen. |