How to remove the border of RadAutoCompleteBox?

[Robin]

hi,
I need to show only tokens in single html row. 
How can I remove the border of RadAutoCompleteBoxx control? Not the border of tokens!.
I tried with following css class "ReadOnlyAutoCompleteBox", but it didn't work.

[Markup]

<telerik:RadAutoCompleteBox ID="AutoCompleteBox1" runat="server" 
InputType="Token" Width="280" CssClass="ReadOnlyAutoCompleteBox" Enabled="false" >

<Entries>

<telerik:AutoCompleteBoxEntry Text="Token 1" />

<telerik:AutoCompleteBoxEntry Text="Token 2" />

<telerik:AutoCompleteBoxEntry Text="Token 3" />

</Entries>

</telerik:RadAutoCompleteBox>

[Css]

.ReadOnlyAutoCompleteBox {

    outline: none!important;

    border-style: none!important;

    border-width: 0px!important;

}

Thanks in advanced.

[Shinu]

Hi Robin,

To remove the border of the RadAutoCompleteBox, try overriding the default CSS as follows.

CSS:

<style type="text/css">
    .RadAutoCompleteBox_Default .racTokenList
    {
        border-color: transparent !important;
    }
</style>

Thanks,
Shinu.

[Robin]

Thans for the reply Shinu, 
Your provided codes worked perfect.
But I changed a little bit like below because of my autoCompleteBox was disabled (Enabled="false").

.RadAutoCompleteBox_Metro .racDisabled{

    border-color:transparent!important;

}

Thanks.

[Albert Shenker]

the provided solution no longer removes the border completely. In the bootstrap skin, a top border is still shown. Is there a way to remove the border completely?

[Doncho]

Hi Albert,

To define which are the CSS styles you need to override in order to achieve the desired custom appearance of the control, you can use the Browser's Developer Tools to inspect the rendered HTML elements and the styles they have applied.

The first two points of the Improve Your Debugging Skills with Chrome DevTools blog post could help you with the process.

When you have defined the styles that need to be overruled you can apply the new styles using a more specific CSS selector than the one used for applying the built-in styles. More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

A possible cause for the described could be the additional box-shadow applied to the RadAutoCompleteBox by Bootstrap skin. If so you may need to override that style as well

You can try:

.RadAutoCompleteBox.RadAutoCompleteBox_Bootstrap .racTokenList{
    border-color:transparent;
    box-shadow:none;
}

 

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik

[Albert Shenker]

that worked. Thank you.