Blog iTeam OS
Trang chủ
Blogspot Tips

Tạo bộ chọn màu bằng Html, Css và JavaScript

Ngay lập tức, có, trong HTML5, hóa ra là một loại đầu vào đã được cung cấp để xử lý nhu cầu chọn màu. Loại đầu vào này được đặt tên là màu. Cách thực

Trong bài viết này, tôi sẽ cho bạn biết một cách dễ dàng để tạo bảng chọn màu bằng HTML5. Bộ chọn màu này thường được sử dụng trên các trang web có chức năng chọn màu.

Tạo bộ chọn màu bằng Html, Css và JavaScript
Tạo bộ chọn màu bằng Html, Css và JavaScript

Hex Code For Picked Color

Ngay lập tức, có, trong HTML5, hóa ra là một loại đầu vào đã được cung cấp để xử lý nhu cầu chọn màu. Loại đầu vào này được đặt tên là màu. Cách thực hiện rất đơn giản, giống như việc tạo một loại đầu vào khác, loại mà chúng tôi sử dụng được gọi là màu. 

<input type="color" value="#1DB8CE" id="colorPicker"/>

Khi chúng ta khai báo màu của loại đầu vào, thì khi chúng ta nhấp vào thì màu đầu vào sẽ mang lại tùy chọn. Tất nhiên, bất kỳ màu nào chúng ta chọn trên bảng màu, nó sẽ là giá trị của chính yếu tố đó.

Đối với những bạn chưa bao giờ sử dụng kiểu nhập này, việc sử dụng nó về cơ bản giống như kiểu nhập thông thường, không có cách xử lý đặc biệt nào. Đầu vào có loại màu này cũng có giá trị giống như các loại đầu vào khác, vì vậy chúng tôi có thể lấy giá trị từ bộ chọn màu đầu vào.

Cách tạo Bộ chọn màu bằng Html, Css và JavaScript: -

Code Html :-

<div class="color-picker">
  <label for="colorPicker">
  <input type="color" value="#1DB8CE" id="colorPicker"/>
  </label>
</div>

Code Css :-

<style type="text/css">
 [type='color'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  width: 11px;
  height: 11px;
  border: none;
}

[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type='color']::-webkit-color-swatch {
  border: none;
}
.color-picker {
 padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
}</style>

Code JavaScript :-

<script type="text/javascript">
//<![CDATA[
/* Color Picker JavaScript */
document.querySelectorAll('input[type=color]').forEach(function(picker) {

  var targetLabel = document.querySelector('label[for="' + picker.id + '"]'),
    codeArea = document.createElement('span');

  codeArea.innerHTML = picker.value;
  targetLabel.appendChild(codeArea);

  picker.addEventListener('change', function() {
    codeArea.innerHTML = picker.value;
    targetLabel.appendChild(codeArea);
  });
});
  
//]]>
</script>

Kết luận:-

Đây là một cách dễ dàng để tạo một bảng chọn màu đơn giản bằng HTML, CSS và JavaScript mà bạn có thể sử dụng trong bất kỳ dự án thiết kế web nào của mình. Bạn có thể sử dụng mã này trong dự án thiết kế dành cho trẻ nhỏ của mình ở bất kỳ đâu trên blogger.com hoặc bất kỳ nền tảng nào khác như WordPress.

Trong bài đăng này, tôi đã chia sẻ cách tạo bảng chọn màu bằng HTML, CSS và JavaScript. Tôi hy vọng phương pháp này của tạo bộ chọn màu bằng HTML, CSS và Javascript có thể rất hữu ích cho bạn và blog của bạn.

Truy cập Bypass Google Account APK để tải file APK nhé