Disabled fields in Safari are unreadable

2 posts, 0 answers
  1. Lindsay Miller
    Lindsay Miller avatar
    12 posts
    Member since:
    Apr 2010

    Posted 18 Aug 2011 Link to this post

    Hi,

    We are using rad input fields throughout our application.  At various times, we disable these fields based on security, etc.  We tried the sample code below in IE and Safari.  The two browsers display differently.  In IE the input values are still readable, however in Safari they are too light.  Is there a way to update the .riDisabled class so the color can be darker?  We need to update this across our application.

    Thanks,
    Lindsay

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>HI MIKE</title>
    </head>
    <style type="text/css"
    HTML BODY .RadInput .riTextBox
    {
        border-bottom: 1px solid;
        border-left: 1px solid;
        padding-bottom: 3px;
        padding-left: 1px;
        padding-right: 1px;
        border-top: 1px solid;
        border-right: 1px solid;
        padding-top: 2px;
    }
    .RadInput_Office2007
    {
        font: 12px "segoe ui", arial, sans-serif;
    }
    HTML BODY .RadInput_Office2007 .riTextBox
    {
        border-bottom-color: #abc1de;
        border-top-color: #abc1de;
        font: 12px "segoe ui", arial, sans-serif;
        background: #fff;
        color: #000;
        border-right-color: #abc1de;
        border-left-color: #abc1de;
    }
    HTML BODY .RadInput_Office2007 .riDisabled
    {
        border-bottom-color: #ccdbed;
        border-top-color: #ccdbed;
        color: #8d8d8d;
        border-right-color: #ccdbed;
        border-left-color: #ccdbed;
        cursor: default;
    }
    </style>
       
    <body>
        <input id="Text1" type="text" value ="Disabled" disabled="disabled"  />
        <br />
        <input id="Text2" type="text" value ="Read Only" readonly="readonly" />
        <br />
        <span id="ctl02_ctl01_OBJ_FIRSTNAME_wrapper" class="RadInput RadInput_Office2007" style="white-space:nowrap;">
            <input value="rtyrty" type="text" maxlength="25" size="20" id="ctl02_ctl01_OBJ_FIRSTNAME_text" 
                name="ctl02_ctl01_OBJ_FIRSTNAME_text" class="riTextBox riDisabled" disabled="disabled" style="width:25ex;" />
        </span>        
    </body>
    </html>
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 23 Aug 2011 Link to this post

    Hi Lindsay,

    You can simply add the desired style to your page stylesheet file if you have one or directly paste it in the page <head> tag and it will apply for all disabled RadTextBoxes. You simply need to replace the color with another one that Safari will recognize, e.g.:
    <head>
        <title>HI MIKE</title>
        <style type="text/css">
     
        HTML BODY .RadInput_Office2007 input.riDisabled
        {
            color: #333333;
        }
        </style>
    </head>


    Greetings,
    Tsvetina
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top