英文:
Updating default html checkbox styles?
问题
我正在面临一个问题，我正在尝试弄清楚如何更新我的HTML复选框，以便一旦选中它，而不是内部的✔️，我放置一个较小尺寸的白色方形div，如附图所示。当我取消选中它时，它就是一个普通的黑色背景复选框，带有白色边框。
我已经付出了一些努力，但不幸的是没有成功。
.checkbox-container input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border: 1px solid black;
}
.checkbox-container input[type="checkbox"]:checked + .checkmark {
background-color: black;
}
<label class="checkbox-container">
<input type="checkbox">
<span class="checkmark"></span>
Checkbox
</label>
英文:
I am facing a problem I am trying to figure out how can I update my html checkbox in such a way that once it is checked instead of tick ✔️ inside I place a small white squared div with lesser dimensions as shown in the attached picture. when I un-check it is just a normal black background checkbox with white-border.
I placed some effort here but was out of luck, unfortunately.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.checkbox-container input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border: 1px solid black;
}
.checkbox-container input[type="checkbox"]:checked + .checkmark {
background-color: black;
}
<!-- language: lang-html -->
<label class="checkbox-container">
<input type="checkbox">
<span class="checkmark"></span>
Checkbox
<!-- end snippet -->
答案1
得分: 4
这应该可以正常工作，如果你的唯一目标是在里面有一个白色框，这可以通过使用border和outline来实现。
body {
background-color: black;
}
input {
appearance: none;
height: 25px;
width: 25px;
background-color: black;
outline: solid 2px white;
}
input:checked {
border: solid 4px black;
background-color: white;
}
<input type="checkbox">
英文:
This should work if your only goal is to have a white box inside, This works by using both a border and an outline
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: black;
}
input {
appearance: none;
height: 25px;
width: 25px;
background-color: black;
outline: solid 2px white;
}
input:checked {
border: solid 4px black;
background-color: white;
}
<!-- language: lang-html -->
<input type="checkbox">
<!-- end snippet -->
答案2
得分: -1
根据一些研究，使用纯HTML的'checkbox'在这个特定领域是不可能的，因为CSS在这方面提供的灵活性不够。
然而，如果您自己重新创建复选框功能，这肯定是可能的。我将尝试为您展示可能的基本示例：
<div class="checkbox"> <!-- 样式化这个div，使它成为一个白色正方形，带有灰色轮廓，就像通常的复选框一样 -->
<img class="check" src="图像来源在这里">
</div>
然后，如果您需要检查div是否被选中或未选中，您可以测试复选框是否有图像来源作为子元素或者没有。
英文:
Upon some research into this, using the pure html 'checkbox' this is impossible due to CSS not giving enough flexibility into this specific area.
However this would certainly be possible if you were to re-create the check box functionality by yourself, I'll try and work on a little base for how this might look:
<div class="checkbox"> <!-- Style this div to be a white square with a grey outline like the checkbox is normally -->
<img class="check" src=" image source here ">
</div>
Then if you need to check if the div is checked or not then you can just test if the checkbox has an img source as a child or not.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论