Radio Button Style

[xbox2007]

hello
i try to change radio button Style .

old style :

old.png (14.52 KiB) Viewed 1645 times

to new Style :

new.png (27.32 KiB) Viewed 1645 times

i add this code to footer-extras.php

Code: Select all

<style>
input[type=radio] {
		display:none;
	}

	input[type=radio] + label{
		display:inline-block;
		margin:2px;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		color: #333;
		text-align: center;
		text-shadow: 0 1px 1px rgba(255,255,255,0.75);
		vertical-align: middle;
		cursor: pointer;
		background-image: linear-gradient(to bottom,#fff,#e6e6e6);
		background-repeat: repeat-x;
		border: 1px solid #ccc;
		border-bottom-color: #b3b3b3;
	}

	input[type=radio]:checked + label{
		background-image: none;
		outline: 0;
		background-color:#2be52d;
	}
</style>	

[pkumar]

looks good and usefull

[nycwebmaster]

Thank You! it works super nice

[Philou]

Hi, thanks for this tips, it works fine...

but

I have an issue since I use SPM plugin. In the page generated by the plugin SPM the radio button selection doesnt work
the bullets are invisible and no selection is visible.

For solving the issue I have change the content of TABLENAME_filter.php


<div>
<input id="FilterValue[1]1" type="radio" name="FilterValue[1]" class="filter_9" value='Attente PEC' checked="" class="active">
<label for="FilterValue[1]1"> Attente PEC</label>
</div>
<div>
<input id="FilterValue[1]2" type="radio" name="FilterValue[1]" class="filter_9" value='En cours'>
<label for="FilterValue[1]2"> En cours</label>
</div>
<div>
<input id="FilterValue[1]3" type="radio" name="FilterValue[1]" class="filter_9" value='Soldé'>
<label for="FilterValue[1]3"> Soldé</label>
</div>


it works but this is not a real soltion because the file should be overwrited if I generate a new Search page with the plugin SPM.

Have you an idea to solve this ?