How to change css style in ValidatorCalloutExtender.

You can design validator call out as per your site theme.

please follow when ever required.


/*call out CSS starts */

.customCalloutStyle div, .customCalloutStyle td{
border: solid 1px Black;
background-color:#8B6725;
color:White;
font-family:Tahoma, Geneva, sans-serif;
}
.customCalloutStyle .ajax__validatorcallout_popup_

table{
display: none;
border: none;
background-color: transparent;
padding: 0px;
}
.customCalloutStyle .ajax__validatorcallout_popup_table_row{
vertical-align: top;
height: 100%;
background-color: transparent;
padding: 0px;
}
.customCalloutStyle .ajax__validatorcallout_callout_cell{
width: 20px;
height: 100%;
text-align: right;
vertical-align: top;
border: none;
background-color: transparent;
padding: 0px;
}
.customCalloutStyle .ajax__validatorcallout_callout_table{
height: 100%;
border: none;
background-color: transparent;
padding: 0px;
}
.customCalloutStyle .ajax__validatorcallout_callout_table_row{
background-color: transparent;
padding: 0px;
}
.customCalloutStyle .ajax__validatorcallout_callout_arrow_cell
{
padding: 8px 0px 0px 0px;
text-align: right;
vertical-align: top;
font-size: 1px;
border: none;
background-color: transparent;
}
.customCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv{
font-size: 1px;
position: relative;
left: 1px;
border-bottom: none;
border-right: none;
border-left: none;
width: 15px;
background-color: transparent;
padding: 0px;
}
.customCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div{
height: 1px;
overflow: hidden;
border-top: none;
border-bottom: none;
border-right: none;
padding: 0px;
margin-left: auto;
}
.customCalloutStyle .ajax__validatorcallout_error_message_cell
{
font-family: Tahoma;
font-size: 11px;
padding: 5px;
border-right: none;
border-left: none;
width: 100%;
}
.customCalloutStyle .ajax__validatorcallout_icon_cell{
width: 20px;
padding: 5px;
border-right: none;
}
.customCalloutStyle .ajax__validatorcallout_close_button_cell{
vertical-align: top;
padding: 0px;
text-align: right;
border-left: none;
}
.customCalloutStyle .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv{
border: none;
text-align: center;
width: 10px;
padding: 1px;
cursor: pointer;
}
/* call out CSS end */


//Call out HTML
RequiredFieldValidator21"
CssClass="customCalloutStyle" WarningIconImageUrl="images/001_111.png" CloseImageUrl="images/001_051.png">
ValidatorCalloutExtender>

//For IE put below

<!--[if IE]>
< link rel="stylesheet" type="text/css" href="css/ie.css" / >
< ![endif]-->

/* css for ie */

.divborder{border:1px solid #d0cece; width:763px; float:left; margin:0 0 0 2px; padding:10px 0 10px 5px;}
.customCalloutStyle .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv img{
border: none;
text-align: center;
width: 25px;
padding: 1px;
cursor: pointer;
z-index:9999;
position:absolute;
right:-13px;
background:none;
}

/* end css for ie */