Mostaza Mostaza - 1 year ago 155
HTML Question

How to change website background after select an option?

I am in the middle of a project that I am not sure how to archive the goal.

Point:1
The idea is when you select one of the colours, the background (white) should change to the colour selected. Does anyone have an idea how could I achieve it easily without a very complex code?

Point:2
Give an option to the users to select a specific colour adding their HEX.

I don't have any clue how to archive it. Could someone give me an inspiration?

enter image description here

Answer Source

Here is a solution to change background color on click :

$(".color-option").on('click', function() {
  var btn = $(this);
  $('body').css('background-color', btn.attr('data-color'));
});
.color-option[data-color="red"] {
  background-color:red;
}

.color-option[data-color="green"] {
  background-color:green;
}
.color-option[data-color="yellow"] {
  background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="choos-color">
    <button class="color-option" data-color="red">
      Red
    </button>
    <button class="color-option" data-color="green">
      Green
    </button>
    <button class="color-option" data-color="yellow">
      Yellow
    </button>
  </div>
</body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download