Input Design

Anonymous

#133239

My question is about how to make the input area look different. Is this something that is possible? I would like the inputs to have pictures beside them.

Trevor

#133382

If you mean the search form fields, you would need to add your own Custom CSS to your theme to style them in this way.

Anonymous

#134353

Hi Trevor,

Sorry for the delay in the response. I am actually working with someone on this and she has another question. Here it is:

I have some questions about choosing how to write the CSS code so images show and are clickable. I lose the clickable element when I add the images which means I am choosing the wrong selectors or this simply can’t be done.

Which elements,selectors, classes/id’s I am supposed to use? I tried choosing the label name and other elements but nothing is working. Can I edit the HTML? I tried it two different ways and they are both below, separated by capitalized words:

/** images for checkboxes**/

.sf-item-149{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2016/04/Antarctica-Adventure-Life.jpg”);
width: 46px;
height: 44px;
}
.sf-item-150{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2016/04/Arctic-Adventure-Life.jpg”);
width: 46px;
height: 44px;
}
.sf-item-145{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/Asia-1100×630.jpg”);
width: 46px;
height: 44px;
}
.sf-item-125{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/kangaroo_600_600.jpg”);
width: 46px;
height: 44px;
}
.sf-item-126{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/10/caribbean.jpg”);
width: 46px;
height: 44px;
}
.sf-item-124{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/lands_of-legends_and_lore.jpg”);
width: 46px;
height: 44px;
}
.sf-item-148{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/Middle-East-1.jpg”);
width: 46px;
height: 44px;
}
.sf-item-147{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/na2.jpg”);
width: 46px;
height: 44px;
}
.sf-item-202{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/oceania-1.jpg”);
width: 46px;
height: 44px;
}
.sf-item-123{
content:url(“http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/xfs_915x685_s50_tubagua01-0-1.jpg”);
width: 46px;
height: 44px;
}

AND THE SECOND WAY:

label[for=sf-input-68c2c1a6882e38e2381ff01aba4633ca] input[type=”checkbox”]{
display: none;!important
}
label[for=sf-input-68c2c1a6882e38e2381ff01aba4633ca] input[type=”checkbox”] {
background: url(‘http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/xfs_915x685_s50_tubagua01-0-1.jpg’) 0 0px no-repeat;!important
z-index: 10;
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
}

label[for=sf-input-68c2c1a6882e38e2381ff01aba4633ca] input[type=”checkbox”]:checked{
background: url(‘http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/xfs_915x685_s50_tubagua01-0-1.jpg’), url(‘http://ecotripmatch.noventum.us/wp-content/uploads/2017/09/xfs_915x685_s50_tubagua01-0-1.jpg’) 0 0px no-repeat;!important
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
}

Trevor

#134355

I would need to see what you have one (a live page link/URL) and what you want it to look like?

Anonymous

#134360

Trevor,

Here you go:

http://ecotripmatch.noventum.us/travel-style-guide-test/

We are trying to create clickable images.

Trevor

#134370

I wonder if this would help you:

https://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement

Anonymous

#134377

Yeah, I tried that one. The problem is choosing the selector that puts an image on Africa, Antarctica, Arctic etc.
The code at URL below changes the entire list to a single image versus different images for each line item. The tricky thing about CSS is choosing the correct selectors. Without being a edit the HTML of the plugin this task is more difficult. Maybe, they will be able to do something.

Trevor

#134389

Could you not change:

input[type=checkbox] + label

to:

input[value="United States"] + label

or whatever?

Anonymous

#134398

Why would I use input[value="United States"] + label
What does that do? Why United States and what is &quot
How is that code supposed to help?

Trevor

#134400

It was an example. You put the values that your checkboxes have. For example …

Africa has a label of Africa, but its value (if you look at the page code) is africa-where, so the CSS rule would be:

input[value="africa-where"] + label {
  background-image: url(...);
}

[Author]

Posts