复选框的自定义勾号不显示在边缘/ie上
复选框的自定义勾号不显示在边缘/IE上是由于浏览器的渲染差异导致的。在某些情况下，自定义的勾号可能会被浏览器默认的样式覆盖或者显示不完整。
为了解决这个问题，可以使用CSS样式来自定义复选框的勾号，并通过调整样式来确保勾号显示在边缘或者在IE浏览器上正常显示。以下是一种常见的解决方案：
- 使用伪元素::before或::after来创建自定义的勾号样式。
- 通过设置content属性为一个Unicode字符或者图片来显示勾号。例如，可以使用content: '\2713'来显示Unicode字符的勾号。
- 使用CSS样式来调整勾号的位置和大小，确保它显示在边缘。可以使用position属性、top和left属性来调整位置，使用font-size属性来调整大小。
- 针对IE浏览器，可以使用特定的CSS hack或者条件注释来应用特定的样式。例如，可以使用IE条件注释来针对IE浏览器设置特定的样式。
以下是一个示例代码，展示如何自定义复选框的勾号并确保在边缘和IE上正常显示：
<!DOCTYPE html>
<html>
<head>
<style>
.custom-checkbox input[type="checkbox"] {
display: none;
}
.custom-checkbox label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
.custom-checkbox label::before {
content: '\2713';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: #fff;
}
.custom-checkbox input[type="checkbox"]:checked + label::before {
background-color: #00aaff;
color: #fff;
}
/* IE hack */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.custom-checkbox label::before {
content: '';
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: #fff;
}
.custom-checkbox input[type="checkbox"]:checked + label::before {
background-color: #00aaff;
color: #fff;
}
}
</style>
</head>
<body>
<div class="custom-checkbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>
</div>
</body>
</html>在这个示例中，我们使用了伪元素::before来创建自定义的勾号样式，并通过调整样式确保勾号显示在边缘。对于IE浏览器，我们使用了特定的CSS hack来应用特定的样式。
对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体的品牌商，建议您访问腾讯云官方网站，查找与云计算相关的产品和服务。腾讯云提供了丰富的云计算解决方案，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。
相关·内容
这是我的小提琴：http://jsfiddle.net/skb643ez/ 这是我的HTML的结构： <p><a href="/somewhere">Somewhere (link)</a><label for="test">Test label</label> Test
<a href="/somewhere&q
浏览 16提问于2019-01-21得票数 0
我正在构建一个显示多项选择对话框的小应用程序。我需要做的是更改复选框图像。我想用我的自定义位图替换绿色的勾号。有没有简单的方法可以做到这一点？可以在不创建自定义适配器的情况下完成此操作吗？谢谢。
浏览 1提问于2012-12-31得票数 1
1回答
我有一个特殊的复选框--它们在Microsoft上没有显示(可见)，所有东西都在IE、Chrome和Safari上工作-webkit-appearance: none;
如果我删除：-webkit-外观:无；将出现复选框，但我将在其他浏览器上失去我的新样式。我怎样才能在边缘上解决这个问题？
浏览 2提问于2016-06-06得票数 1
回答已采纳
这是我想出来的： ? 现在唯一让我感到困惑的是如何去掉两个边缘标记(红色圆圈)。我正在绘制一个图表来表示一周内的数据，例如，从2021年14月3日星期一到2021年3月21日星期日。但由于我不希望周一和周日处于两个边缘上，我又在域名中添加了两天(周日13/03/2021和星期一22/03/2021)，然后尝试删除两个“边缘勾号”下面的日期，但我没有找到一种方法。我想知道是否有更好
浏览 15提问于2021-03-19得票数 1
回答已采纳
1回答
我尝试在使用角度材料的HTML中选中复选框时显示计数。 当用户单击复选框时，此复选框将以数字1选中，而不是勾号或十字。如果用户再次单击，将显示数字2。你知道我怎样才能做到这一点吗？我在Google上找不到任何使用Angular材质的例子... ? 谢谢
浏览 7提问于2020-04-06得票数 0
回答已采纳
1回答
在我们的网站上，我们正在显示样式化复选框的图标。图标是从SVG文件中呈现的。这些图标在边缘浏览器中加载非常慢(几乎10秒)。它在IE和Chrome中运行得很好。请建议一些选项，以改善边缘的图像加载时间。带有复选框的屏幕截图。实现细节
在从web服务获得响应时，动态添加与复选框对应的HTML元素。逻辑是用纯JS实现<e
浏览 0提问于2020-01-07得票数 0
2回答
在IE11中，checkbox和listbox默认显示如下：<body><input type="checkbox" /><input type="radio" /></html>我可以通过添加自定义样式CSS让它们像IE<
浏览 9提问于2016-01-27得票数 0
2回答
原始问题：}input::-ms-reveal, display: none;::ms-clear正在工作，并移除用户可以清除输入的小测试在IE 11，MS边缘基于铬和最新的MS边缘是不基于铬。右
浏览 2提问于2020-04-26得票数 32
回答已采纳
在IE9中，我的网页显示为Browser Mode: IE9 Compat View和Document Mode: IE standards，这破坏了我所有的canvases。
我已经确保将<!如何在IE9上强制“正常”IE9模式？
浏览 3提问于2012-05-29得票数 3
回答已采纳
4回答
我有黑色背景的页面。在IE、Firefox、Chrome和Safari中，我的复选框如下所示：
但Opera显示的复选框如下：因此用户看不到他是否选中了复选框，因为勾号(复选标记)也是黑色的。下面是我的css的一部分： background-attachment: fixed;
background-color: #
浏览 2提问于2011-10-26得票数 2
回答已采纳
3回答
坚持IE兼容模式
、、、
我正在处理的站点的URL最终出现在Microsoft兼容性列表上。这意味着每次IE用户访问它时，都会强制使用IE9模式，这使得无法使用现代的CSS或Javascript。<!</title>X-UA-Co
浏览 4提问于2014-02-19得票数 5
回答已采纳
2回答
我有一个django应用程序(从其中我得到一些html作为客户端)，和一个base64 64编码的PDF，需要显示。我尝试过多种方法，这些方法在Chrome/Firefox中就像预期的那样工作。在Windows 7下的IE11中工作，在Windows 10下的边缘和IE11上不工作。pdf_preview_embed').html(
&
浏览 4提问于2016-07-21得票数 10
回答已采纳
3回答
我对输入有一个CSS规则，如下所示： border: 1px solid black;问题是IE (已经在IE 8和9上测试过)和Opera中的复选框也继承了这个边框，它们没有显示默认样式，而是显示了带有白色背景和黑色复选框的自定义模式，如下所示：而不是像Windows 7那样的原生风格，在Chrome和Firefox中<
浏览 0提问于2011-03-18得票数 9
回答已采纳
我在高级自定义字段中创建了3个复选框字段:获奖提名公开获奖提名关闭获奖者公告 我想让它们都出现在前端，当web编辑器选中后端的复选框时，前端会出现一个勾号。我试着在下面的帖子中使用代码，因为它正是我想要的，但它使我的网站崩溃。Display checkboxes values from ACF (Wordpress) on front <div></div> 这段代码显示了选项
浏览 49提问于2019-09-06得票数 0
2回答
我不能设法将“填充”应用于IE11上的复选框，因此它们的行为与在IE10上相同。在IE10上，复选框的计算样式为：height: 13px;margin: 0;width: 13px;padding: 0;
marg
浏览 4提问于2013-11-26得票数 3
3回答
为什么复选框一直显示为正方形？
、、、、
网页浏览器的复选框和滚动条按钮显示为正方形。这种情况不会发生在其他个人电脑上。
我试图在普通浏览器中加载HTML代码，除internet外，所有其他浏览器都正确显示了勾号。
浏览 10提问于2022-09-22得票数 -1
2回答
为什么当我在某个文件中的某个元素上放置边框半径时，它不能用边框半径正确呈现，并且在Internet Explorer11的边框半径属性下有一条红色的卷曲线？<div style="width: 100px; height: 100px; background-color: red; border-radius: 5px;"&
浏览 2提问于2016-02-19得票数 5
回答已采纳
如果你有一个隐藏的字段，<div style="display:none"></div>
在设计模式中，不能看到div的内容。Visual 2012中是否有任何设置可以使不可见标记在设计模式下显示？
浏览 8提问于2014-01-16得票数 4
我有一个简单的vbscript代码：然而，当我在IE11中查看此文件时，Windows 7上并没有显示hello world。
浏览 2提问于2015-04-08得票数 1
回答已采纳
1回答
<span class="cr"><i class="cr-icon fa fa-check"></i></span></div>它在IE中工作得很好，无论屏幕尺寸有多小，刻度可以非常非常小，这是意料之中<em
浏览 0提问于2017-09-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
