js+css实现下拉提示弹出的搜索框效果代码
代码语言:html
所属分类:搜索
代码描述:js+css实现下拉提示弹出的搜索框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); html, body { height: 100vh; width: 100vw; margin:0;padding:0; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background: #007991; background: -webkit-gradient(linear, left top, left bottom, from(#78ffd6), to(#007991)); background: linear-gradient(to bottom, #78ffd6, #007991); } .type-ahead { width: 100%; max-width: 250px; position: relative; -webkit-perspective: 500px; perspective: 500px; } .type-ahead__input { padding: 12px 34px 12px 12px; border: none; border-radius: 0; font-size: 14px; letter-spacing: .4px; caret-color: #007991; color: #007991; outline: none; width: calc(100% - 46px); box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.1).........完整代码请登录后点击上方下载按钮下载查看
网友评论0