Как установить изображение на colorchooser в jquery

Question

Как установить изображение на colorchooser в jquery

2

Я сделал выбор цвета в jQuery, и я хочу установить изображение на кнопку выбора цвета.

code: 

< body>
<input type="color" class="back-color-change"/>
</body>
<script>
$(".back-color-change").on("change",function(){
var colorpick=($(".back-color-change").val());
$(".body").css("background-color",colorpick);
 });
</script>

Я хочу этот тип вместо этого изображения

Zakir Haider 01 март 2016, в 09:36

Источник

Теги:

jquery

twitter-bootstrap

html5

css3

2 ответа

0

Вы можете использовать label для выбора цвета. Скрыть палитру цветов и использовать label for как следующее.

$(".back-color-change").on("change", function () {
    var colorpick = this.value;
    $("body").css("background-color", colorpick);
});

#color {
    display: none;
}
#color + label {
    background-image: url('http://www.html5canvastutorials.com/demos/assets/color-picker.png');
    background-size: cover;
    display: block;
    height: 25px;
    width: 75px
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<input type="color" class="back-color-change" id="color" />
<label for="color"></label>

Ibrahim Khan 01 март 2016, в 08:53

0

нет, дорогой, просто показать кнопку, и я хочу переопределить изображение на кнопку выбора цвета. когда я нажимаю на изображение, то должен выбрать вызывающий цвет
Zakir Haider 01 март 2016, в 08:12
0

я хочу щелкнуть изображение, чтобы вызвать средство выбора цвета вместо нажатия кнопки выбора цвета. может быть, теперь вы поймете, что я имею в виду.
Zakir Haider 01 март 2016, в 08:13

Ещё вопросы

нет, дорогой, просто показать кнопку, и я хочу переопределить изображение на кнопку выбора цвета. когда я нажимаю на изображение, то должен выбрать вызывающий цвет
я хочу щелкнуть изображение, чтобы вызвать средство выбора цвета вместо нажатия кнопки выбора цвета. может быть, теперь вы поймете, что я имею в виду.

Bastian Rang · Accepted Answer · 2016-03-01T08-40-00.000Z

Вы должны дать входному элементу непрозрачность нуля и окружить его элементом, содержащим ваше изображение в качестве фонового изображения. См. Пример в фрагменте:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<style>
.colorpicker-img {
background-image: url('http://i.stack.imgur.com/1Vohn.png');
width: 6em;
height:4em;
}
.colorpicker-img input[type="color"] {
opacity:0;
width: 6em;
height:4em;
}
</style>

<body>
<div class="colorpicker-img">
    <input type="color" class="back-color-change" />
</div>
</body>

<script>
    $(".back-color-change").on("change", function () {
        var colorpick = this.value;
        $("body").css("background-color", colorpick);
    });
</script>