Radiobutton style in html

M

MarkShoe

I currently have a page which has an asp:radiobuttonlist on it as well as a
few html <input type="radio"> elements on it. The problem is that they
don't appear the same; the asp radiobuttons have a green dot in the middle,
and the html ones have a black dot... I would like them both to have the
green dot to be consistent, but I don't want to use the asp radiobutton
control for all of them.

Is there a way I can style my <input type="radio"> to look the same as the
asp:radiobutton ?

Thanks,
Mark
 
A

Allen Chen

Hi Mark,

From your description you get the black dots when using <input
type="radio"/> and get the green dots when using <asp: RadioButtonList>.
However, based on my experience it should not behave like this since <asp:
RadioButtonList> will also be rendered as <input type="radio"/>. The
browser will process these tags in the same way unless a certain style is
specified for either of them.

I would like to show an example here. Please create a new Web Site Project
and paste following code to aspx file:
==================================================

<div>
Input_Radio
<br />
<input type="radio" name="group1" value="item0" />item0
<br />
<input type="radio" name="group1" />item1
<br />
Asp_RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>item0</asp:ListItem>
<asp:ListItem>item1</asp:ListItem>
</asp:RadioButtonList>
</div>
==================================================

Then view the page. We can see the colors of the dots are same. The color
of the dot of a radio button should be green by default (tested in IE 7 and
FireFox 2 in Windows XP SP2, may vary in other browsers running in
different operating systems).

If we specify a background color for the first radio button and view the
page in IE 7:

<input type="radio" name="group1" value="item0"
style="background-color:#cc0000;"/>item0

We can see the dot is black now.

If we view the page in FireFox 2, however, the green dot is still
displayed. This is caused by the different rendering engine used by
different browsers.

To solve your problem I suggest you to check if styles are applied. You can
remove all the styles/CSS to see if you still get the black dots.

If you still have this problem please send me a demo project. It'll help me
to dig this issue further.

Regards
Allen Chen
Microsoft Online Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.


--------------------
| From: "MarkShoe" <[email protected]>
| Subject: Radiobutton style in html
| Date: Mon, 4 Aug 2008 10:03:01 -0400
| Lines: 4
| Message-ID: <[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain;
| format=flowed;
| charset="iso-8859-1";
| reply-type=original
| Content-Transfer-Encoding: 7bit
| X-Priority: 3
| X-MSMail-Priority: Normal
| Importance: Normal
| X-Newsreader: Microsoft Windows Live Mail 12.0.1606
| X-MimeOLE: Produced By Microsoft MimeOLE V12.0.1606
| X-MS-CommunityGroup-MessageCategory:
{E4FCE0A9-75B4-4168-BFF9-16C22D8747EC}
| X-MS-CommunityGroup-PostID: {28D76E2F-1972-4E09-9E31-3D6F2728740E}
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet.webcontrols:3888
| NNTP-Posting-Host: TK2MSFTNGHUB02.phx.gbl 127.0.0.1
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
|
| I currently have a page which has an asp:radiobuttonlist on it as well as
a
| few html <input type="radio"> elements on it. The problem is that they
| don't appear the same; the asp radiobuttons have a green dot in the
middle,
| and the html ones have a black dot... I would like them both to have the
| green dot to be consistent, but I don't want to use the asp radiobutton
| control for all of them.
|
| Is there a way I can style my <input type="radio"> to look the same as
the
| asp:radiobutton ?
|
| Thanks,
| Mark
|
|
 
A

Allen Chen

Hi Mark,

Is this problem solved? Please let me know if there is anything that I can
do for you.

Regards,
Allen Chen
Microsoft Online Support

--------------------
| X-Tomcat-ID: 62216839
| References: <[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain
| Content-Transfer-Encoding: 7bit
| From: (e-mail address removed) (Allen Chen)
| Organization: Microsoft
| Date: Tue, 05 Aug 2008 08:55:44 GMT
| Subject: RE: Radiobutton style in html
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| Lines: 125
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet.webcontrols:3893
| NNTP-Posting-Host: tk5tomimport2.phx.gbl 10.201.218.20
|
| Hi Mark,
|
| From your description you get the black dots when using <input
| type="radio"/> and get the green dots when using <asp: RadioButtonList>.
| However, based on my experience it should not behave like this since
<asp:
| RadioButtonList> will also be rendered as <input type="radio"/>. The
| browser will process these tags in the same way unless a certain style is
| specified for either of them.
|
| I would like to show an example here. Please create a new Web Site
Project
| and paste following code to aspx file:
| ==================================================
|
| <div>
| Input_Radio
| <br />
| <input type="radio" name="group1" value="item0" />item0
| <br />
| <input type="radio" name="group1" />item1
| <br />
| Asp_RadioButtonList
| <asp:RadioButtonList ID="RadioButtonList1" runat="server">
| <asp:ListItem>item0</asp:ListItem>
| <asp:ListItem>item1</asp:ListItem>
| </asp:RadioButtonList>
| </div>
| ==================================================
|
| Then view the page. We can see the colors of the dots are same. The color
| of the dot of a radio button should be green by default (tested in IE 7
and
| FireFox 2 in Windows XP SP2, may vary in other browsers running in
| different operating systems).
|
| If we specify a background color for the first radio button and view the
| page in IE 7:
|
| <input type="radio" name="group1" value="item0"
| style="background-color:#cc0000;"/>item0
|
| We can see the dot is black now.
|
| If we view the page in FireFox 2, however, the green dot is still
| displayed. This is caused by the different rendering engine used by
| different browsers.
|
| To solve your problem I suggest you to check if styles are applied. You
can
| remove all the styles/CSS to see if you still get the black dots.
|
| If you still have this problem please send me a demo project. It'll help
me
| to dig this issue further.
|
| Regards
| Allen Chen
| Microsoft Online Support
|
| Delighting our customers is our #1 priority. We welcome your comments and
| suggestions about how we can improve the support we provide to you.
Please
| feel free to let my manager know what you think of the level of service
| provided. You can send feedback directly to my manager at:
| (e-mail address removed).
|
| ==================================================
| Get notification to my posts through email? Please refer to
|
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
| ications.
|
| Note: The MSDN Managed Newsgroup support offering is for non-urgent
issues
| where an initial response from the community or a Microsoft Support
| Engineer within 1 business day is acceptable. Please note that each
follow
| up response may take approximately 2 business days as the support
| professional working with you may need further investigation to reach the
| most efficient resolution. The offering is not appropriate for situations
| that require urgent, real-time or phone-based interactions or complex
| project analysis and dump analysis issues. Issues of this nature are best
| handled working with a dedicated Microsoft Support Engineer by contacting
| Microsoft Customer Support Services (CSS) at
| http://msdn.microsoft.com/subscriptions/support/default.aspx.
| ==================================================
| This posting is provided "AS IS" with no warranties, and confers no
rights.
|
|
| --------------------
| | From: "MarkShoe" <[email protected]>
| | Subject: Radiobutton style in html
| | Date: Mon, 4 Aug 2008 10:03:01 -0400
| | Lines: 4
| | Message-ID: <[email protected]>
| | MIME-Version: 1.0
| | Content-Type: text/plain;
| | format=flowed;
| | charset="iso-8859-1";
| | reply-type=original
| | Content-Transfer-Encoding: 7bit
| | X-Priority: 3
| | X-MSMail-Priority: Normal
| | Importance: Normal
| | X-Newsreader: Microsoft Windows Live Mail 12.0.1606
| | X-MimeOLE: Produced By Microsoft MimeOLE V12.0.1606
| | X-MS-CommunityGroup-MessageCategory:
| {E4FCE0A9-75B4-4168-BFF9-16C22D8747EC}
| | X-MS-CommunityGroup-PostID: {28D76E2F-1972-4E09-9E31-3D6F2728740E}
| | Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| | Path: TK2MSFTNGHUB02.phx.gbl
| | Xref: TK2MSFTNGHUB02.phx.gbl
| microsoft.public.dotnet.framework.aspnet.webcontrols:3888
| | NNTP-Posting-Host: TK2MSFTNGHUB02.phx.gbl 127.0.0.1
| | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
| |
| | I currently have a page which has an asp:radiobuttonlist on it as well
as
| a
| | few html <input type="radio"> elements on it. The problem is that they
| | don't appear the same; the asp radiobuttons have a green dot in the
| middle,
| | and the html ones have a black dot... I would like them both to have
the
| | green dot to be consistent, but I don't want to use the asp radiobutton
| | control for all of them.
| |
| | Is there a way I can style my <input type="radio"> to look the same as
| the
| | asp:radiobutton ?
| |
| | Thanks,
| | Mark
| |
| |
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,539
Members
45,024
Latest member
ARDU_PROgrammER

Latest Threads

Top