1. h5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } input{ display: block; width: 200px; height: 50px; } </style> </head> <body> <p> <input type="color" id="txtColor" value="#3289c7"> <input type="text" id="txtStyle" value="#3289c7"> </p> <script src="jquery-1.9.1.min.js"></script> <script> $(‘#txtColor‘).on(‘change‘, function (e) { var color = this.value; $("#txtStyle").val(color); }); $(‘#txtStyle‘).on(‘change‘, function (e) { var color = this.value; $("#txtColor").val(color); }); </script> </body> </html>
2. colorpicker 插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://farbelous.io/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet"> </head> <body> <div class="jumbotron"> <h1>Bootstrap Colorpicker Demo</h1> <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" /> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script> <script src="https://farbelous.io/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script> <script> $(function () { // Basic instantiation: $(‘#demo‘).colorpicker(); // Example using an event, to change the color of the .jumbotron background: $(‘#demo‘).on(‘colorpickerChange‘, function(event) { $(‘.jumbotron‘).css(‘background-color‘, event.color.toString()); }); }); </script> </body>
备注：
h5 自带的编辑工具要填充默认颜色，不然有 bug
ie 不兼容，edge 倒是可以，而且 h5 上的样式还挺不错的
原文：https://www.cnblogs.com/justSmile2/p/10478035.html
