This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Additional frame in search field

  • No replies
  • 0 have this problem
Hans Markowitz
Hans Markowitz
more options

I started to learn DevTools for Thunderbird, because I want to fully customize my TB. And I'm stuck with such thing. I want this: <Picture 1> Both search boxes are blue.

For the upper search box is this code snippet responsible:

input { 

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 font-size: 1rem;
 border: 1px solid var(--color-gray-40);
 border-radius: var(--button-border-radius);
 padding-inline: var(--padding-block) var(--search-icon-clearance);
 background-color: var(--layout-background-0);

}

So I change it to:

input { 

 position: relative;
 inset: 0;
 width: 100%;
 height: 100%;
 font-size: 1rem;
 border: 1px solid #82D6FF !important;
 border-radius: var(--button-border-radius);
 padding-inline: var(--padding-block) var(--search-icon-clearance);
 background-color: var(--layout-background-0);

}

And then I have this <Picture 2>


So I get additional frame. But I don't want it. And I can't understand, why I see this additional frame in this place?

Can someone explain me this please?

I started to learn DevTools for Thunderbird, because I want to fully customize my TB. And I'm stuck with such thing. I want this: <Picture 1> Both search boxes are blue. For the upper search box is this code snippet responsible: input { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 1rem; border: 1px solid var(--color-gray-40); border-radius: var(--button-border-radius); padding-inline: var(--padding-block) var(--search-icon-clearance); background-color: var(--layout-background-0); } So I change it to: input { position: relative; inset: 0; width: 100%; height: 100%; font-size: 1rem; border: 1px solid #82D6FF !important; border-radius: var(--button-border-radius); padding-inline: var(--padding-block) var(--search-icon-clearance); background-color: var(--layout-background-0); } And then I have this <Picture 2> So I get additional frame. But I don't want it. And I can't understand, why I see this additional frame in this place? Can someone explain me this please?
Attached screenshots

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.