nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Confluence searchbox customization

poonam chaudhar

In chrome it looks:

In mozilla it looks:

I am applying css to the seachbox to change its look but its working in mozilla not in chrome.Searchbox appears different in chrome.I have attached the screenshot for your reference.CSS code i am using is :

background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E24C30;
border-radius: 5px 5px 5px 5px;
height: 23px;
padding: 1px 9px;
width: 380px;

Accepted answers

Dennis Kromhout van der Meer

Are you sure that you're doing this on OnDemand? As we do not allow css customizations due to platform restrictions. Next to the css rules, can you please provide your full css including the css selector that you're using? It might be that Chrome is not succesfully picking that up.

All comments

Dennis Kromhout van der Meer

poonam chaudhar

Yes.I am doing all the changes in custom Stylesheet.I am not using any css selector. i am just changing the confluence

#header .quick-search-query {

width: 13em;

}

class to

.quick-search-query
{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E24C30;
border-radius: 5px 5px 5px 5px;
height: 24px;
padding: 0px 9px;
width: 382px;
margin-top:6px;
}

.quick-search-query {
width: 29em;
}

which works in mozzila but not in chrome.

Harley Flanagan

for chrome:

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}

poonam chaudhar

Thanks a lot it works..

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

confluence-cloud