相关疑难解决方法(0)
如何在点击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> …推荐指数
解决办法
查看次数
将HTML复选框的"勾号"标记替换为图像或任何其他符号
如何Tick在HTML复选框中使用不同的图形(图像或其他符号)而不是默认标记.
我读了许多SO问题,但不能那样做.当我看到这个问题改变刻度线的颜色和这个.一切都是老问题.但它太复杂了.
有没有简单的方法来做到这一点.我希望现在有一个简单而好的方法吗？
推荐指数
解决办法
查看次数
使用 TalkBack 或 VoiceOver 时，样式居中复选框不可选中
我开发了一个移动网络应用程序，并正在测试它的可访问性。我在 Android 上使用 TalkBack（启用“触摸浏览”）或 iOS 上的 VoiceOver 时遇到了一些无法选中的复选框。
问题是我们“隐藏”了实际的复选框，用户看到了一个外观和行为都像复选框的样式标签并与之交互。
这是隐藏实际复选框的 CSS 的一部分：
.input-tick {
position: absolute;
left: -999em;
这是完整的 HTML 和 CSS 示例（另请参阅JSFiddle。）
.input-tick {
position: absolute;
left: -999em;
.input-tick {
position: absolute;
left: -999em;
}
.input-tick[disabled] + label {
cursor: not-allowed;
opacity: 0.5;
}
.input-tick[type="checkbox"]:checked + label::after {
border: 3px solid;
border-right: none;
border-top: none;
content: "";
height: 10px;
left: 4px;
position: absolute;
top: 4px;
width: 14px;
transform: rotate(-55deg);
}
.input-tick[type="radio"] + label::before {
border-radius: 100%;
} …推荐指数
解决办法
查看次数
如何/如何使用 CSS 设置未选中的复选框/（单选？）按钮的背景颜色样式？
使用accent-color https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color（在除IE之外的所有浏览器中），我们可以在选中时更改复选框元素的填充颜色，然而，在未选中时是否可以设置背景颜色的样式并不明显。
默认的“白色”颜色在大多数情况下都很好，但在尝试支持深色模式主题时，而不将操作系统设置为深色模式......设置此背景颜色似乎难以捉摸。
尝试过设置background-color、 withtransparent等各种版本!important，但没有成功。是否有一个神奇的设置/技巧（不诉诸自定义元素而不是默认的 HTML 复选框/单选）？
*{
font-family:sans-serif;
}
label{
cursor:pointer;
user-select:none;
}
input[type="checkbox"]{
accent-color:purple;
}
input[type="raido"]{
accent-color:red;
}<label><input type="checkbox"/> Unchecked</label><br/>
<label><input type="checkbox" checked="checked"/> Checked</label><br/>
<label><input type="checkbox" disabled="disabled"/> Disabled</label><br/>
<hr/>
<label><input type="radio" name="related"/> Unchecked A</label><br/>
<label><input type="radio" name="related"/> Unchecked B</label><br/>
<label><input type="radio" name="related"/> Unchecked C</label><br/>
<label><input type="radio" name="related" checked="checked"/> Checked D</label><br/>
<label><input type="radio" name="related" disabled="disabled"/> Disabled</label><br/>accent-color在 caniuse.com 上： https: //caniuse.com/mdn-css_properties_accent-color
推荐指数
解决办法
查看次数
使用jQuery设置样式复选框
我需要通过jquery来设置一些复选框,但我不想使用插件.我只需要一个简单的jQuery代码.
我想用一个简单的css风格列表.
<ul id="list">
<li class="selected"><a id="1" href="#">1</a></li>
<li><a id="2" href="#">2</a></li>
<li><a id="3" href="#">3</a></li>
</ul>
同时我在代码中输入了由css隐藏的输入复选框:
<input type="checkbox" id="1" name="rivista_numero" value="1" checked />
<input type="checkbox" id="2" name="rivista_numero" value="2" />
<input type="checkbox" id="3" name="rivista_numero" value="3" />
使用jquery,如果我点击"链接,父li元素将收到"selected"类,将检查具有相同ID的复选框.
你认为这可能是一个很好的解决方案吗？是否有可能用jQuery实现这个结果？
推荐指数
解决办法
查看次数
将复选框与样式的其余部分对齐/样式复选框
我正在尝试使用我的表单的其余部分对齐和设置一组复选框,但我没有太多经验样式表单.我正在努力分别引用图例,标签和输入框.我看过用不同标记构建的复选框,所以我不确定是否有更好的方法来实现这一点.
预期的布局/风格:
HTML:
<div id="appraisals-form" class="contact-form">
<form role="form" method="post" action="contact-form.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>
<label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>
<label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's …推荐指数
解决办法
查看次数
How to change the color of a check box in antd?
import { Checkbox } from 'antd'
<Checkbox style={{ color: 'red', backgroundColor: 'black' }}>Dr John</Checkbox>
How to change the color of the check box not the label 'Dr John'? The above style only change the styles of the label not the check box?
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
复选框使用图像,:标记之前
我正在尝试使用之前和images创建自定义复选框.我的代码是
<label for="gbx">
<input type="checkbox" name="gbx" id="gbx">
<span>12344</span>
</label>
这里的Css代码
input {
display: none;
}
span:before{
content: "s";
display: block;
background-image: url("3_.png");
background-repeat: no-repeat;
width: 20px;
background-size: cover;
}
input:checked+ span:before{
content: "vijay";
display: block;
background-image: url("2_.png");
background-repeat: no-repeat;
width: 20px;
background-size: cover;
}
但它似乎只有内容存在.如果我减小字体大小图像也减小其大小.为什么？
推荐指数
解决办法
查看次数
是否可以设置这样的复选框样式？
我的设计采用了非常具体的方式来添加复选框。它用于过滤产品列表。选择过滤器后，复选框中间应有一个黑色框。但是，我似乎无法找到如何做到这一点。
我从复选框运行逻辑，确定是否选中某些 JavaScript，因此它肯定需要保留为复选框。
有人有什么想法吗？
推荐指数
解决办法
查看次数