[Resolved] removing tag

[Author]

Posts

[Nigel]

On your screenshot the style rule to set the br tag display property to none appears to have a line through it meaning it is being superseded by another declaration, the simplest solution may be to identify why.

If you want to replace the radio inputs with images, you can find lots of examples of how to do so, but they typically require the label to follow the input rather than be wrapped around the input, which is the markup currently generated by Views radio filters.

I modified how the filter is inserted slightly like so to include a "radios" class on the wrapper div:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group radios">
	<label>[wpml-string context="wpv-views"]Yay or Nay[/wpml-string]</label>
	[wpv-control-postmeta field="wpcf-yay-or-nay" url_param="wpv-wpcf-yay-or-nay"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

That produced markup on the page as shown in the screenshot.

You must already be employing some technique to hide the radio inputs and only show labels which you can continue with, but for reference's sake, this is how the HTML5 Boilerplate does it:

[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

Given the markup shown in the screenshot you can then either target all labels (to add an background image, for example) with

.radios .radio label {
  /* styles */
}

If you wanted to target individual labels to use a different image or apply some other unique styling, you can use the nth-of-type pseudo-class on the .radio class, e.g.

.radios .radio:nth-of-type(1) label {
  /* styles unique to first label */
}

[teganK]

the radio buttons are being generated through db they can be 1to n or they can be
how do i loop through 1 to n to get values?

[Nigel]

Do you need to do that?

In your screenshots you are using the same icons for each of the radio buttons in a group, so it is not obvious that you need to differentiate between the individual radio buttons, you can style each of the buttons in a filter the same.

You can normally use selectors that target the values such as

input[value="yes"]

but that targets the input itself, and not the label, and because the label is wrapped around the input there is no way to target it in CSS that I can think of other than as described in the previous answer, using nth-of-child.

It would probably still be easier to work out why the style rule to not display the br tags in legacy mode are not being respected.