css与jquery实现电商规格radio选择框效果代码
代码语言:html
所属分类:表单美化
代码描述:css与jquery实现电商规格radio选择框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style type="text/css"> body { margin: 0; } #controller { height: auto; float: left; padding: 30px; } dl { height: 60px; } dt { margin-bottom: 10px; font-weight: bold; display: inline-block; float: left; margin-right: 10px; } dd { float: left; padding-left: 0; margin-left: 10px; position: relative; top: -12px; } .radios { display: inline-block; padding: 5px 8px; background: #FFF; border: 2px solid #D4D4D4; cursor: pointer; margin-right: 5px; margin-top: 5px; min-width: 70px; text-align: center; } .radios.current, .radios:hover, .radios.current:hover { border: 2px solid #3B94C7; color: #3B94C7; background: #EEEEEE; position: relative; } .radios:hover { border-color: #D4D4D4; } .radios.current:before { content: ''; width: 0; height: 0; position: absolute; left: -1px; top: -1px; border-left: 10px solid #3B94C7; border-bottom: 10px solid rgba(0, 0, 0, 0); border-right: none; } .radios.current:after { content: ''; width: 0; height: 0; position: absolute; right: 0; bottom: 0; border-right: 4px solid #3B94C7; border-bottom: 4px solid #3B94C7; border-left: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid rgba(0, 0, 0, 0); } #box { float: left; margin-left: 200px; margin-top: 100px; } #tipwapper { border: 1px solid #EEEEEE; position: relative; width: 100px; height: 100px; } #tip { display: inline-block; width: 0; height: 0; border: 50px solid #3B94C7; position: absolute; } textarea { width: 350px; height: 150px; resize: none; border: 2px solid #D4D4D4; padding: 10px; } h1 { color: #DD5500; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0