我正在使用官方引导程序文档中的代码创建一个简单的复选框:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
Run Code Online (Sandbox Code Playgroud)
我想知道如何使复选框比当前大?我曾尝试编辑 csscustomCheck并更改高度和宽度属性,但这不会增加框的大小。
我想将我的复选框更改为这种颜色#FA9E57。我正在使用 bootstrap v 4.6。
这是我的复选框代码:
input[type=checkbox]{
width: 20px;
height: 20px;
background-color: #FA9E57;
}
input[type=checkbox]:checked{
background-color: #FA9E57;
}Run Code Online (Sandbox Code Playgroud)
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="register.css">
<title><%=judul %></title>
<body>
<div class="form-group my-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="privacy">
<label class="form-check-label ml-3" for="privacy">
Agree privacy
</label>
</div>
</div>
</body>Run Code Online (Sandbox Code Playgroud)
我想知道如何在这个给定的例子中更改Bootstraps 4复选框背景颜色.
非常感谢!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
.custom-control-label::before,
.custom-control-label::after {
top: .8rem;
width: 1.25rem;
height: 1.25rem;
}
</style>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Run Code Online (Sandbox Code Playgroud) 我正在尝试使用Font Awesome设置复选框的样式,复选框是从插件自动生成的,我使用wordpress我有一个关于JSFiddle中所有内容的模型
我的CSS似乎有些不对劲,但我无法弄清楚是什么.
<div id="sidebar-cards-archive">
<ul>
<li class="cat-item cat-item-12">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
</li>
<li class="cat-item cat-item-14">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
</li>
<li class="cat-item cat-item-11">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
</li>
<li class="cat-item cat-item-15">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
</li>
<li class="cat-item cat-item-13">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
这是CSS
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
#sidebar-cards-archive ul li {
list-style: none;
}
/*** custom checkboxes ***/
input[type=checkbox] {
display:none;
}
/* to hide …Run Code Online (Sandbox Code Playgroud) 我想在选中复选框时显示绿色选中的图像,并且当未选中时显示空框.我试图在div中设置复选框并设置div的背景,但它并没有帮助我.知道该怎么办?以下是我想要的输出.

我想将以下复选框(其名称为"genres")中的复选标记(勾号)颜色更改为"蓝色".但它显示为"黑色".
<input type="checkbox" name="genres" value="adventure" id="adventure_id">
<label for="adventure_id" style="font-family: 'SExtralight'; font-size:14px;">Adventure</label>
Run Code Online (Sandbox Code Playgroud) 我是html和css的有限知识.请原谅这是一个愚蠢的问题.我尝试过不同的方法,但无法解决这个问题.
http://teddyslist.com/dev/register.php
在页面底部,有一个单选按钮说"首选联系方式".
<input type="radio" name="preferredcontact" value="P"> Phone
<input type="radio" name="preferredcontact" value="E"> Email
Run Code Online (Sandbox Code Playgroud)
单选按钮在Firefox中显示,甚至在IE上显示.但他们没有在Chrome和Safari中展示.这对我来说很奇怪.我认为CSS存在一些冲突.
我正在尝试更改复选框的背景颜色和边框,但它不起作用。
HTML:
<label for="checkbox1" class="checkbox">
<input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox</span>
</label>
Run Code Online (Sandbox Code Playgroud)
CSS:
.checkbox input:checked {
border-color: red;
background-color:red;
}
Run Code Online (Sandbox Code Playgroud)
更新:
我无法更改标记
我在一个页面中有9个图像,并且布局看起来像9个图像的网格.当我点击图像时,我有一个想要用作每个图像边框的图像.这是一个带边框的透明图像,就像确认图像的选择一样.
我怎样才能实现这一点?当我点击图像时,当我点击图像边框图像应该消失时,边框图像会反复出现.
有没有办法只使用HTML和CSS来实现它
.image1 {
left: 786 px;
top: 629 px;
position: absolute;
width: 441 px;
height: 243 px;
float: left;
}
.image2 {
left: 1284 px;
top: 629 px;
position: absolute;
width: 441 px;
height: 243 px;
float: left;
}
.image3 {
left: 289 px;
top: 920 px;
position: absolute;
width: 441 px;
height: 243 px;
float: left;
}
<html>
<body>
<div class="image1">
<img src="images/image1.png" />
</div>
<div class="image2">
<img src="images/image2.png" />
</div>
<div class="image3">
<img src="images/image3.png" />
</div> …Run Code Online (Sandbox Code Playgroud) 如何Tick在HTML复选框中使用不同的图形(图像或其他符号)而不是默认标记.
我读了许多SO问题,但不能那样做.当我看到这个问题改变刻度线的颜色和这个.一切都是老问题.但它太复杂了.
有没有简单的方法来做到这一点.我希望现在有一个简单而好的方法吗?
css ×9
html ×8
bootstrap-4 ×3
checkbox ×2
bootstrap-5 ×1
font-awesome ×1
html5 ×1
input ×1
javascript ×1
jquery ×1