相关疑难解决方法(0)

增加引导程序复选框的大小

我正在使用官方引导程序文档中的代码创建一个简单的复选框:

<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并更改高度和宽度属性,但这不会增加框的大小。

javascript css bootstrap-4 bootstrap-5

16
推荐指数
6
解决办法
2万
查看次数

复选框 CSS 无法更改复选框的背景颜色

我想将我的复选框更改为这种颜色#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)

html css twitter-bootstrap bootstrap-4

16
推荐指数
2
解决办法
6万
查看次数

更改Bootstrap 4复选框背景颜色

我想知道如何在这个给定的例子中更改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)

html css bootstrap-4

13
推荐指数
1
解决办法
2万
查看次数

如何使用Font Awesome设置CSS复选框的样式

我正在尝试使用Font Awesome设置复选框的样式,复选框是从插件自动生成的,我使用wordpress我有一个关于JSFiddle中所有内容的模型

http://jsfiddle.net/bBPY5/1/

我的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)

html css checkbox font-awesome

11
推荐指数
1
解决办法
3万
查看次数

如何显示图像代替复选框?

我想在选中复选框时显示绿色选中的图像,并且当未选中时显示空框.我试图在div中设置复选框并设置div的背景,但它并没有帮助我.知道该怎么办?以下是我想要的输出.

图片

css jquery html5

10
推荐指数
3
解决办法
4万
查看次数

如何更改HTML中复选框的复选标记颜色?

我想将以下复选框(其名称为"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

9
推荐指数
1
解决办法
6万
查看次数

单选按钮未显示在safari和chrome中

我是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 css

6
推荐指数
1
解决办法
2万
查看次数

如果选中,则更改复选框的颜色

我正在尝试更改复选框的背景颜色和边框,但它不起作用。

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)

JSFiddle 演示

更新:

我无法更改标记

html css checkbox input

6
推荐指数
2
解决办法
4万
查看次数

如何在点击html和css时切换图像

我在一个页面中有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)

html css

5
推荐指数
1
解决办法
1718
查看次数

将HTML复选框的"勾号"标记替换为图像或任何其他符号

如何Tick在HTML复选框中使用不同的图形(图像或其他符号)而不是默认标记.

我读了许多SO问题,但不能那样做.当我看到这个问题改变刻度线的颜色这个.一切都是老问题.但它太复杂了.

有没有简单的方法来做到这一点.我希望现在有一个简单而好的方法吗?

html css

5
推荐指数
2
解决办法
2万
查看次数