AppGini Community Forums

Posted: **2022-01-19 01:29**

hello
i try to change radio button Style .

old style :

: old.png (14.52 KiB) Viewed 4406 times

to new Style :

: new.png (27.32 KiB) Viewed 4406 times

i add this code to footer-extras.php

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

Posted: **2022-01-31 10:14**

looks good and usefull

Posted: **2022-02-22 17:36**

Thank You! it works super nice

Posted: **2022-12-27 16:17**

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 ?

AppGini Community Forums

Radio Button Style

Radio Button Style

Re: Radio Button Style

Re: Radio Button Style

Re: Radio Button Style