以下是我最终使用的内容:
$("input.color").each(function() {
var that = this;
$(this).parent().prepend($("").click(function() {
that.type = (that.type == "color") ? "text" : "color";
}));
}).change(function() {
$(this).attr("data-value", this.value);
this.type = "text";
});
label {
font-family: sans-serif;
width: 300px;
display: block;
position: relative;
}
input {
padding: 5px 15px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
input[type=color] {
padding: 0;
border: 0;
height: 40px;
}
input[type=color]:after {
content: attr(data-value);
position: absolute;
bottom: 10px;
text-align: center;
color: #fffff5;
display: block;
width: 100%;
}
.color-icon {
position: absolute;
bottom: 10px;
right: 10px;
color: #666;
}
Color: