Question

我希望在我的网站上有多个颜色选择器，我遇到的问题是它们彼此冲突。

有人伸出援手是因为它让我疯了哈哈哈哈！

目前基本上发生的事情是我可以通过颜色选择器选择颜色。我多次想要颜色选择器。问题是，当我添加另一个时，它们似乎相互冲突。

HTML：

      <div class="color-wrapper">
  <p>Choose color for Header</p>
   <!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
  <form name="test">
  <input type="text" name="custom_color" ng-model="eventData.headerColor" placeholder="#FFFFFF" id="pickcolor" class="call-picker">
</form>
  <div class="color-holder call-picker"></div>
  <div class="color-picker" id="color-picker" style="display: none"></div>
</div>

使用Javascript：

  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];

var picker = $('#color-picker');

for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}

$('body').click(function () {
picker.fadeOut(1);
});

$('.call-picker').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
  var codeHex = $(this).data('hex');

  $('.color-holder').css('background-color', codeHex);
  $('#pickcolor').val(codeHex).trigger('change');
});
});

CSS：

* {
  margin: 0;
  padding: 0;
}

.color-wrapper {
  position: relative;
  width: 250px;
  margin: 20px 50px;
}

.color-wrapper p {
  margin-bottom: 5px;
}

input.call-picker {
  border: 1px solid #AAA;
  color: #666;
  text-transform: uppercase;
  float: left;
  outline: none;
  padding: 10px;
  text-transform: uppercase;
  width: 85px;
}

.color-picker {
  width: auto;
  background: #F3F3F3;
  height: auto;
  padding: 5px;
  border: 5px solid #fff;
  box-shadow: 0px 0px 3px 1px #DDD;
  position: absolute;
  top: 61px;
  left: 2px;
}

.color-holder {
  background: #fff;
  cursor: pointer;
  border: 1px solid #AAA;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-picker .color-item {
  cursor: pointer;
  width: 20px;
  height: 20px;
  list-style-type: none;
  float: left;
  margin: 2px;
  border: 1px solid #DDD;
}

.color-picker .color-item:hover {
  border: 1px solid #666;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=8);
}

Answer 1

<input type="color" name="your_input_name" />

添加第二个颜色选择器

1 个答案: