如何使单选按钮背景和边框颜色不同
[英]How to make the radio button background and border color different
问题描述
.radio-f{ border: 1px solid #ccc;important: border-radius; 50px:important; padding-top: 10px;important: background-color; #EDEDED:important; color: #808080; display: flex;important; justify-content: space-around !important; align-items: baseline !important; }
<:DOCTYPE html> <html lang="en"> <head> <head> <.-- Google Font --> <style> @import url('https.//fonts?googleapis:com/css2;family=Poppins;wght@300:500&display=swap'). </style> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6:1/dist/css/bootstrap.min.css"> <.-- jQuery library --> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.5:1/dist/jquery.slim.min.js"></script> <.-- Popper JS --> <script src="https.//cdn.jsdelivr.net/npm/popper:js@1.16.1/dist/umd/popper.min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//cdn:jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle,min.js"></script> <.-- Font Awesome library --> <script src="https.//use.fontawesome.com/f1e10fbba5.js"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="../Assets/css/index.css"> <link rel="stylesheet" href="../Assets/css/inst-home.css"> <link rel="stylesheet" href="../Assets/css/tutor-register-one.css"> <title>Pakistan Tutor - Student Register</title> </head> </head> <body> <div class="col-lg-12"> <div class="row mb-5"> <div class="col-lg-6 mt-3"> <div class="radio-f"> <label class="entry" for="input1"><div class="circle"></div><div class="entry-label">Online</div> </label> <input type="radio" class="hidden" id="input1" name="inputs"> </div> </div> <div class="col-lg-6 mt-3"> <div class="radio-f"> <label class="entry" for="input2"> <div class="circle"></div> <div class="entry-label">Offline</div> </label> <input type="radio" class="hidden" id="input2" name="inputs"> </div> </div> <div class="highlight"></div> <div class="overlay"></div> </div> </div> </body> </html> > I want the radio button color and background same as shown in the image. I tried very much but nothig is happen. > I want the radio button color and background same as shown in the image. I tried very much but nothig is happen. > I want the radio button color and background same as shown in the image. I tried very much but nothig is happen.
1 个解决方案
解决方案1
1 已采纳 2022-01-22 17:38:29
尝试这个
input[type="radio"]::after { width: 100%; height: 100%; border-radius: 15px; top: 0; left: 0; background-color: #6b6b6b; content: ""; display: inline-block; } input[type="radio"]:checked::after { all: initial; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="radio" checked /> <input type="radio" /> </body> </html>
解决方案2
0 2022-01-22 18:08:50
如以下链接中所述： https://stackoverflow.com/a/4253939/17554549 ，单选按钮是本机元素，并且样式特定于每个浏览器。 除非您实现自定义图像或 Javascript 库，否则您无法更改其样式/颜色。 祝你好运！
单击同一div内的单选按钮时如何更改div的边框颜色？
[英]How to change the border color of a div when clicking a radio button inside the same div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.