Input Design

Anonymous

#134406

Okay, is that the only code I put or do I need other code? I am asking because that code by itself does nothing. And what is &quot

input[value="africa-where"] + label {
background-image: url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/Africa1.jpeg”);
}

Trevor

#134466

I paste the code in to a code area, and the &quot you see is your browser trying to render a double quote. t depends what you are copying and pasting into. A rich text editor would cause that, but a proper text or code editor should not. Be carefuly, because rich text editors convert double quotes into those more curly smart quotes, which will not work.

Also, that image is HUGE. You need scaled down versions!! All the same size, and use that size in the following code (I assumed here that it would be 50x100px):

input[value="africa-where"] + label {
  background-image: url("http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/Africa1.jpeg") !important;
  background-size: cover;
  color: transparent;
  
}
input[value="africa-where"] + label:hover {
  cursor: pointer; 
}
.searchandfilter li[data-sf-field-input-type="checkbox"] label {
  height: 50px;
  width: 100px;
}

If they DO match the size, then you would not need the background-size: cover; line.

If you want to hide the checkbox, this would then do that:

.searchandfilter li[data-sf-field-input-type="checkbox"] input {
  display: none;
}

[Author]

Posts