coloris实现颜色取色选择器效果代码
代码语言:html
所属分类:选择器
代码描述:coloris实现颜色取色选择器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/coloris.min.css"> <style type="text/css"> @import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap); body { height: 120vh; margin: 30px; color: #444; background-color: #fff; font-family: 'Lato', sans-serif; } h1 { margin-bottom: 1.5em; } input { width: 150px; height: 32px; padding: 0 10px; border: 1px solid #ccc; border-radius: 5px; font-family: inherit; font-size: inherit; font-weight: inherit; box-sizing: border-box; } .examples { display: flex; flex-wrap: wrap; } .example { flex-shrink: 0; width: 300px; margin-bottom: 30px; } .square .clr-field button, .circle .clr-field button { width: 22px; height: 22px; left: 5px; right: auto; border-radius: 5px; } .square .clr-field input, .circle .clr-field input { padding-left: 36px; } .circle .clr-field button { border-radius: 50%; } .full .clr-field button { width: 100%; height: 100%; border-radius: 5px; } </style> </head> <div class="examples"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0