<!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>
</html>
1432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
