首页 > 软件开发 > HTML >

html设置单选框颜色

来源:互联网 2023-03-16 19:16:12 134

html设置单选框颜色,html的单选框默认的样式很多人都可能不是很喜欢,因此我们需要用CSS来设置一下单选框的颜色,实际上和设置多选框颜色的原理是一样的,分为背景颜色和边框颜色。ixw办公区 - 实用经验教程分享!

html设置单选框颜色ixw办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text 3
  • chrome浏览器

方法/步骤

  • 1

    打开编辑器,然后新建一个html文件,编写入基本的框架。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 2

    用form,input和label创建一个单项选择题。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 3

    创建一个新的css文件,并且用link标签关联HTML文件。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 3该信息未经授权抓取自百度经验
  • 4

    input[type="radio"] {ixw办公区 - 实用经验教程分享!

    display: none;ixw办公区 - 实用经验教程分享!

    }ixw办公区 - 实用经验教程分享!

    撤销一下原来按钮的样式。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 5

    input[type='radio'] label:before{ixw办公区 - 实用经验教程分享!

    content: "";ixw办公区 - 实用经验教程分享!

    display: inline-block;ixw办公区 - 实用经验教程分享!

    width: 20px;ixw办公区 - 实用经验教程分享!

    height: 20px;ixw办公区 - 实用经验教程分享!

    border: 2px solid gold;ixw办公区 - 实用经验教程分享!

    }ixw办公区 - 实用经验教程分享!

    首先设置未点击的单选框样式,用border来设置颜色。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 6

    input[type='radio']:checked label:before{ixw办公区 - 实用经验教程分享!

    background-color: red;ixw办公区 - 实用经验教程分享!

    }ixw办公区 - 实用经验教程分享!

    接着设置点击后的背景颜色,这里用background-color。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 7

    我们来查看一下效果如何。ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

    html设置单选框颜色ixw办公区 - 实用经验教程分享!

  • 注意事项

    • 这里要熟悉CSS选择器的规则

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!ixw办公区 - 实用经验教程分享!


    标签: CSSHTML颜色

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码