Input Design

Terry

#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.

Add New Note to this Reply

Trevor Moderator

#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.

Add New Note to this Reply

Terry

#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;
}

Add New Note to this Reply

Trevor Moderator

#134355

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

Add New Note to this Reply

Terry

#134360

Trevor,

Here you go:

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

We are trying to create clickable images.

Add New Note to this Reply

Trevor Moderator

#134370

I wonder if this would help you:

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

Add New Note to this Reply

Terry

#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.

Add New Note to this Reply

Trevor Moderator

#134389

Could you not change:

input[type=checkbox] + label

to:

input[value="United States"] + label

or whatever?

Add New Note to this Reply

Terry

#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?

Add New Note to this Reply

Trevor Moderator

#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(...);
}

Add New Note to this Reply

[Author]

Posts