Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal


  • Give kudos
  • Received
  • Given


  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How to change quick search box color in JIRA 6.3

How to change quick search box color in JIRA 6.3.4?

I want to highlight Search box.

BNYM JIRA Menu Bar.jpg

3 answers

1 accepted

0 votes
Answer accepted

** Add below script to Announcement Banner


<!--Temporary Style for Search Box-->



#quickSearchInput {

border-radius: 5em;

background: rgba(255,255,255,1);

color: rgba(0, 0, 0, 0.7);



#quickSearchInput::-webkit-input-placeholder {

    color: rgba(0, 0, 0, 0.7);


#quickSearchInput:-moz-placeholder {

    /#quickSearchInput FF 4-18 #quickSearchInput/

    color: rgba(0, 0, 0, 0.7);


#quickSearchInput::-moz-placeholder {

    /#quickSearchInput FF 19+ #quickSearchInput/

    color: rgba(0, 0, 0, 0.7);


#quickSearchInput:-ms-input-placeholder {

    /#quickSearchInput IE 10+ #quickSearchInput/

    color: rgba(0, 0, 0, 0.7);



.aui-header .aui-quicksearch::after{

color: rgba(0, 0, 0, 0.7);




<!--Temporary Style for Search Box End-->



Vicky Kharisma [Atlassian] Thursday 3:29 PM Hi Datta, Thanks for contacting Support. Please be reminded that Atlassian doesn't provide support for a customisation or development request as per our Support Offering. However, I've spent some time to look into the code and we can't change the quick search background manually. The quick search box CSS is defined under the atlassian-jira/static-assets/metal-all.css and you can see there is no properties around the text-field background: {noformat} .aui-header .aui-quicksearch input{-moz-appearance:textfield;-webkit-appearance:textfield;background:#dc3912;border:2;border-radius:5em;box-shadow:inset 1px 2px 3px rgba(0,0,0,0.3);-moz-box-sizing:border-box;box-sizing:border-box;color:#333;font-family:inherit;font-size:inherit;height:1.71428571428571em;line-height:1.42857142857143;margin:8px 0;padding:2px 10px;vertical-align:baseline;width:170px} .aui-header .aui-quicksearch input:focus{background-color:#dc3912;outline:0} .aui-header .aui-quicksearch input::-webkit-input-placeholder{color:#707070} .aui-header .aui-quicksearch input::-moz-placeholder{color:#707070;opacity:1} {noformat} Given that, you may want to change the header to a slightly brighter color, or make the text color brighter. Thanks, Vicky Kharisma Atlassian Support


I have applied the above code in the Announcement banner
Chrome and IE is showing the search box as per changes (white background and grey search text and search button ). Firefox is showing the white background and grey search button but search text is not grey . It is also white . As a result of which search text is not visible in Firefox. 

Suggest an answer

Log in or Sign up to answer

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you