[hughabbott]

Wayne – hello and hope you can help.
I’d like to make my own radio buttons.

The buttons look fine when they are not selected. But selected radio buttons are given a round edge background. This distorts the PNG that I am using for my selected button.

Could you tell me the class that I ought to be editing.

Many thanks – Hugh

[support-michael]

@hughabbott

Can you post a screenshot?

[hughabbott]

Hello Wayne – thanks for helping out on this one.
I tried two work-arounds.
First I replaced the standard radio buttons with my new design (this includes some transparency). But the transparency came out black (scrn 1).

So then I replace the transparency with a blue background. But you can see some grey edges on the button. The problems only occur with the checked radio button. (scrn 2).

I have pasted below the changes I made in index.css . But the odd thing is that the ‘checked’ style only has one line … and that is to reference the .png file. I can’t work out what other styles are affecting it?

Thanks for your help.

Hugh

scrn 1 scrn 2

.m1-radiobutton{
-webkit-appearance: textarea;
background-image: url(images/butRadioUp.png);
border: 0;
height: 37px;
margin: 0px 0px 0px 0px;
width: 37px;
}

.m1-radiobutton:checked{
background-image: url(images/butRadioD.png);
}

[support-michael]

@hughabbott

At 1st glance I suspect your image’s transparency is goofed. Mainly because the unchecked image renders correctly. The only visual difference in the CSS is switching images between checked and unchecked.

[hughabbott]

Wayne hello.
Yes, I thought my transparency was the problem … that’s why I experimented with a solid color background.
But even with a solid colour, I can see the problem. The ‘selected’ radio button has some kind of bevelled edge ?

It should look like this, below:

Here is the same image with a transparent background:

So where are the bevelled edges coming from ? Where are the bevelled edges defined ?

This is sure making me scratch my head !!!

All help gratefully received.

Thanks – Hugh

[hughabbott]

Hello Wayne – I’m still struggling with this issue.

Could you take a minute to re-read my posts – they have the relevant detail.

I could really do with some help.

Appreciatively – Hugh

[Author]

Posts