Radiobutton style in html

Discussion in 'ASP .Net Web Controls' started by MarkShoe, Aug 4, 2008.

  1. MarkShoe

    MarkShoe Guest

    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
     
    MarkShoe, Aug 4, 2008
    #1
    1. Advertising

  2. MarkShoe

    Allen Chen Guest

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

    ==================================================
    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" <>
    | Subject: Radiobutton style in html
    | Date: Mon, 4 Aug 2008 10:03:01 -0400
    | Lines: 4
    | Message-ID: <>
    | 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
    |
    |
     
    Allen Chen, Aug 5, 2008
    #2
    1. Advertising

  3. MarkShoe

    Allen Chen Guest

    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: <>
    | MIME-Version: 1.0
    | Content-Type: text/plain
    | Content-Transfer-Encoding: 7bit
    | From: (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: <>
    | 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:
    | .
    |
    | ==================================================
    | 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" <>
    | | Subject: Radiobutton style in html
    | | Date: Mon, 4 Aug 2008 10:03:01 -0400
    | | Lines: 4
    | | Message-ID: <>
    | | 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
    | |
    | |
    |
    |
     
    Allen Chen, Aug 8, 2008
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Curtis Koppang

    Behavior in CSS style on RadioButton

    Curtis Koppang, Dec 11, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    612
    Curtis Koppang
    Dec 11, 2003
  2. Carlos

    radiobutton html control

    Carlos, Apr 8, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    368
    Carlos
    Apr 8, 2005
  3. Rob Nicholson
    Replies:
    3
    Views:
    745
    Rob Nicholson
    May 28, 2005
  4. ensingg
    Replies:
    0
    Views:
    670
    ensingg
    Sep 15, 2006
  5. Ken Varn
    Replies:
    0
    Views:
    470
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page