css美化radio选择框效果代码
代码语言:html
所属分类:表单美化
代码描述:css美化radio选择框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { padding: 100px; } .radio { display: inline-block; position: relative; line-height: 18px; margin-right: 10px; cursor: pointer; } .radio input { display: none; } .radio .radio-bg { display: inline-block; height: 18px; width: 18px; margin-right: 5px; padding: 0; background-color: #45bcb8; border-radius: 100%; vertical-align: top; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s ease; } .radio .radio-on { display: none; } .radio input:checked + span.radio-on { width: 10px; height: 10px; position: absolute; border-radius: 100%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0