Apply CSS on Button Inside Calendar in RadDateTimePicker

2 posts, 0 answers
  1. Yefta
    Yefta avatar
    14 posts
    Member since:
    Mar 2015

    Posted 23 Mar 2015 Link to this post

    Hai, i got a problem using RadDateTimePicker.
    I'm using a css class to apply style on button globally
    The CSS style is like this:

    button, input[type="button"], input[type="submit"]
     border:2px solid #DFDFDF; -webkit-border-radius: 6px; -moz-border-radius: 6px;
     font-size:11px;font-family:tahoma, verdana, arial, sans-serif; padding: 4px 12px 4px 12px; text-decoration:none; display:inline-block;font-weight:bold; color: #141414;
     background-color: #E6E6E6; background-image: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC));
     background-image: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
     background-image: -moz-linear-gradient(top, #E6E6E6, #CCCCCC);
     background-image: -ms-linear-gradient(top, #E6E6E6, #CCCCCC);
     background-image: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
     cursor: pointer;
    button, input[type="button"], input[type="submit"]:hover
        cursor: pointer;
        color: #414141;
        background-color: #cdcdcd; background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);
    button, input[type="button"], input[type="submit"]:disabled
        opacity: 0.65;
        cursor: not-allowed;

    and it makes the button ("Today", "OK", "Cancel") inside Calendar in RadDateTimePicker (On Calendar, Click on month, and it shows the button) is looks like disabled, and the cursor is "not-allowed" when i hover on it.

    How to override the style on the button?

    I have attach the image, it looks like disabled and the cursor is "not-allowed" (the screenshot in windows doesn't shows cursor, but believe me it's changed) 
  2. Konstantin Dikov
    Konstantin Dikov avatar
    2126 posts

    Posted 25 Mar 2015 Link to this post

    Hello Yefta,

    Since you are overriding the styles of the input elements through your global CSS, you need to override them by a selector to the RadCalendar buttons. The CSS below is the selector for those input elements:
    div .RadCalendarMonthView .rcButtons input {
        background: #fff;
        border: 1px solid #333;
        color: #000;
    div .RadCalendarMonthView .rcButtons input:hover {
        background: #eee;
        border: 1px solid #333;
        color: #000;
        cursor: pointer;

    Hope this helps.

    Konstantin Dikov

    See What's Next in App Development. Register for TelerikNEXT.

Back to Top