ComboBox styling problem

[Frieder]

Hello folks,

 

i tried to restyle a combobox to have a rounded border, which works quite well, but one quirk is driving me nuts and i just can't solve this problem. As you can see in the attached screenshot, there are tiny white spots on the edges of the combobox, which shouldn't be there, They may be not visible at the fist glance, but they are there and our customer wants them gone. I am using the Office2010Black.css and the telerik.common.css, both are registered in the MasterPage. I would be so grateful if someone could help me out here, because i literally spent days to fix this to no avail.

Below you find the css code im using to change the borders

.t-state-default {
    border-color: #434449 !important;
}

.t-input{
   background-color:#434449;
   border:solid 1px #434449;

This is how i create the Combobox:

<% Html.Telerik().ComboBox() _
                    .Name("ComboBox_ProductTitle") _
                    .AutoFill(True) _
                    .Value(Request.Form("ComboBox_ProductTitle")) _
                    .BindTo(New SelectList(Model.ProductDistinctTitles, "Text", "Value")) _
                    .HtmlAttributes(New With {.style = "border: 1px solid #434449; background-color:#434449;border-radius:3px;vertical-align:middle;"}) _
                    .DropDownHtmlAttributes(New With {.style = "width:250px !IMPORTANT;overflow-x: hidden; border-radius:3px;"}) _
                    .Filterable(Function(filtering) filtering.FilterMode(AutoCompleteFilterMode.StartsWith)) _
                    .HighlightFirstMatch(False) _
                    .OpenOnFocus(False) _
                      .Render()%>

[Dimo]

Hello Frieder,

The observed appearance is caused by the browser itself and can be reproduced with a simple <div>. As far as I can see, the issue occurs when the border color matches the background color. Please remove the border (corner rounding will still work) or use two different colors.

Regards,
Dimo
the Telerik team

[Frieder]

Hello Dimo,

thank you for your answer!

I tried your suggestion and removed the border, but unfortunatetly the white pixels persisted. If i don't assign a background color at all, the element is plain white and the corners look good. As soon i set the background color, the problem reappears, even with no border. Is there some way to change that default white to another color to circumvent the problem?

best regards,

Frieder

[Dimo]

Hi Frieder,

I am afraid I have no other suggestions for you, as the problem seems related to the browser's rendering engine.

Regards,
Dimo
the Telerik team

[AccMan]

Hello Frieder, 

Try this css, I also needed to create combobox with 5px rounded border, and i did this : 

.t-combobox.t-header                           { background:transparent; }
.t-combobox > .t-state-default                 { border-color:Green; /* Your border color*/}
.t-combobox > .t-dropdown-wrap                 { height:20px; background:Red;/* Your background color*/ border-radius:5px; }
.t-combobox > .t-dropdown-wrap > .t-select     { background:transparent; }
.t-combobox > .t-dropdown-wrap > .t-input      { background:transparent;  }

Perhaps this will help you ;)

[Frieder]

Hey Jerome,

this code did the trick, thank you so much! Looks like there is still much to learn for me when it comes to the internal workings of the telerik controls!

best regards, Frieder