Radio Button Style

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
xbox2007
Veteran Member
Posts: 129
Joined: 2016-12-16 16:49

Radio Button Style

Post by xbox2007 » 2022-01-19 01:29

hello
i try to change radio button Style .

old style :
old.png
old.png (14.52 KiB) Viewed 2053 times
to new Style :
new.png
new.png (27.32 KiB) Viewed 2053 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
Posts: 4
Joined: 2021-05-01 22:52

Re: Radio Button Style

Post by pkumar » 2022-01-31 10:14

looks good and usefull

nycwebmaster
Veteran Member
Posts: 90
Joined: 2015-11-23 01:02

Re: Radio Button Style

Post by nycwebmaster » 2022-02-22 17:36

Thank You! it works super nice

Philou
Posts: 7
Joined: 2014-06-15 07:37

Re: Radio Button Style

Post by Philou » 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 ?

Post Reply