复选框、单选框、placeholder样式修改

最新推荐文章于 2023-06-29 17:22:18 发布

chenyi6179

最新推荐文章于 2023-06-29 17:22:18 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/missZhuo/blog/1860492

本文介绍了一种使用CSS自定义HTML中复选框与单选按钮样式的详细方法，并展示了如何改变输入框占位符的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
.wrapped input[type='checkbox'] {
width: 20px;
height: 20px;
background: url(img/check.png) no-repeat;
background-size: 100%;
-webkit-appearance: none;
outline: none;
}

.wrapped input[type=checkbox]:checked {
background: url(img/checked.png) no-repeat;
background-size: 100%;
}

.wrapped input[type='radio'] {
width: 20px;
height: 20px;
background: url(img/checked.png) no-repeat;
background-size: 100%;
-webkit-appearance: none;
outline: none;
}

.wrapped input[type=radio]:checked {
background: url(img/check.png) no-repeat;
background-size: 100%;
}

.wrapped ::-webkit-input-placeholder {
/* WebKit browsers */
color: red;
font-size: 16px;
}

.wrapped ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: red;
font-size: 16px;
}

.wrapped :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: red;
font-size: 16px;
}

.wrapped :-ms-input-placeholder {
/* Internet Explorer 10+ */
color: red;
font-size: 16px;
}
</style>
</head>

<body>
<div class="wrapped">
<p>
<label>checkbox</label>
<input type="checkbox" />one
</p>
<p>
<label>radio</label>
<input type="radio" name="fruit" />苹果
<input type="radio" name="fruit" />香瓜
<input type="radio" name="fruit" />火龙果
<input type="radio" name="fruit" />百香果
<input type="radio" name="fruit" />哈密瓜
</p>
<p>
<label>placeholder</label>
<input type="text" placeholder="我想要变红色" />
</p>
</div>
</body>