Confluence searchbox customization

[poonam chaudhari]

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;

[Dennis Kromhout van der Meer · Accepted solution]

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.

[poonam chaudhari]

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 chaudhari]

Thanks a lot it works..