$("#colour").change(function(event) {
console.log($(this).val());
});
input[type=color] {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>
尽管我做了<input type='color'>圆角，当我输入一个值（至少在 safari 上）时，它会将圆形更改为正方形。我怎样才能做到这一点？谢谢。
My idea:
- 创建一个内联块
<span>
- set
input[type=color]至不可见。
- 绑定点击事件
<span>引起<input>.click().
Because <input>对形状定制不友好。
$("#colour").change(function(event) {
console.log($(this).val());
$("#color_front").css('background-color',$(this).val());
});
$("#color_front").click(function(event) {
$("#colour").click();
});
input[type=color] {
display: none;
}
span {
border-radius: 50%;
width: 100px;
height: 100px;
background-color:red;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="color_front"></span>
<input type='color' value='#fefefe' class='bar' id='colour'>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
