How do i remove the focus border color of a textbox?

[Zilkode]

I have created a UserControl to create rounded corner effect:

<Border Name="border"
			CornerRadius="6"
			BorderThickness="1">
		<TextBox Name="textbox" 
				 VerticalContentAlignment="Center"
				 FontSize="16"
				 Classes="Transparent"></TextBox>
	</Border>

However i am unable to remove the Textbox's bluish border when focusing the textbox.
I use this style:

<Style Selector="TextBox.Transparent">
     <Setter Property="BorderBrush" Value="{StaticResource TransparentBrush}" />
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="Background" Value="{StaticResource TransparentBrush}" />
 </Style>

I also tried both of these:

<Style Selector="TextBox.Transparent:focus-visible">
			<Setter Property="BorderBrush" Value="{StaticResource TransparentBrush}" />
			<Setter Property="BorderThickness" Value="0" />
			<Setter Property="Background" Value="{StaticResource TransparentBrush}" />
		</Style>

<Style Selector="TextBox.Transparent:focus">
			<Setter Property="BorderBrush" Value="{StaticResource TransparentBrush}" />
			<Setter Property="BorderThickness" Value="0" />
			<Setter Property="Background" Value="{StaticResource TransparentBrush}" />
		</Style>

I tried those commands:
textbox.SelectionForegroundBrush = null;
textbox.SelectionBrush = null;
textbox.FocusAdorner = null;

Nothing helps.
Help please?

[maxkatz6]

For Fluent theme correct selector will be "TextBox:focus /template/ Border#PART_BorderElement"
See https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml#L136

[Zilkode]

Worked like a charm!
Thank you!

[ClementeGao]

@maxkatz6

	<Window.Styles>
		<Style Selector="TextBox">
			<Style Selector="^:focus">
				<Setter Property="BorderBrush" Value="Red"/>
				<Style Selector="^:/template/ Border#PART_BorderElement">
					<Setter Property="Background" Value="Green"/>
					<Setter Property="BorderBrush" Value="Pink"/>
					<Setter Property="BorderThickness" Value="1" />
				</Style>
			</Style>
		</Style>
	</Window.Styles>

or

	<Window.Styles>
		<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
					<Setter Property="BorderBrush" Value="Pink"/>
		</Style>
	</Window.Styles>

all can not set border color when focues
why ? can you help me?

[timunie]

	<Window.Styles>
		<Style Selector="TextBox">
			<Style Selector="^:focus">
				<Setter Property="BorderBrush" Value="Red"/>
-				<Style Selector="^:/template/ Border#PART_BorderElement">
+				<Style Selector="^ /template/ Border#PART_BorderElement">
					<Setter Property="Background" Value="Green"/>
					<Setter Property="BorderBrush" Value="Pink"/>
					<Setter Property="BorderThickness" Value="1" />
				</Style>
			</Style>
		</Style>
	</Window.Styles>

check the red line, there is a : which shouldn't be there.

Also which Theme do you use? Fluent or any other?

[ClementeGao]

@maxkatz6

	<Window.Styles>
		<Style Selector="TextBox">
			<Style Selector="^:focus">
				<Setter Property="BorderBrush" Value="Red"/>
				<Style Selector="^:/template/ Border#PART_BorderElement">
					<Setter Property="Background" Value="Green"/>
					<Setter Property="BorderBrush" Value="Pink"/>
					<Setter Property="BorderThickness" Value="1" />
				</Style>
			</Style>
		</Style>
	</Window.Styles>

or

	<Window.Styles>
		<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
					<Setter Property="BorderBrush" Value="Pink"/>
		</Style>
	</Window.Styles>

all can not set border color when focues
why ? can you help me?

[stevemonaco]

Those both work for me in Fluent theme + Avalonia 11.1-rc2.

Well, the first approach has a bad selector: <Style Selector="^:/template/ Border#PART_BorderElement"> should be <Style Selector="^ /template/ Border#PART_BorderElement">.