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.
5 Answers, 1 is accepted

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.

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.

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:
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
Our thoughts here at Progress are with those affected by the outbreak.
