• 1
    • 7
    • Our product teams collect and evaluate feedback from a number of different sources. To learn more about how we use customer feedback in the planning process, check out our new feature policy.

      NOTE: This suggestion is for JIRA Cloud. Using JIRA Server? See the corresponding suggestion.

      When choosing dark colours for the 'Header Background Colour', the search bar is difficult to locate. This behaviour was not present in the earlier releases when the search bar always had white background. Hence this is a regression bug.


      There is no way to customise the colours on the instance to make the search field more visible. It always takes the header colour as its colour.

      Possible Solution

      • making the search bar background color customizable would solve this
      • alternatively, we could de-link the search bar colour with the top bar colour

      Workaround:

      Apply following CSS in the announcement banner:
      Please test this script to see if it breaks any JIRA UI or functionality.

      <style>
      #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);
      }
      </style>
      

        1. dark_search_bar2.png
          dark_search_bar2.png
          6 kB
        2. New Design.png
          New Design.png
          10 kB
        3. Old view.png
          Old view.png
          26 kB
        4. screenshot-1.png
          screenshot-1.png
          56 kB

            [JRACLOUD-38890] customizable background color for the search bar

            I am seeing the same issue on 7.1.9, but seeing that the announcement banner is gone in 7.1.9 and replaced with a paid for plugin, can this be done Look and Feel customized css? Thankful for answers.

            Jonas Andersson added a comment - I am seeing the same issue on 7.1.9, but seeing that the announcement banner is gone in 7.1.9 and replaced with a paid for plugin, can this be done Look and Feel customized css? Thankful for answers.

            The header inc the search bar is getting an overhaul via ADG 3 (coming soon) and currently being explored by Confluence in the Simplify work.

            skougs (Inactive) added a comment - The header inc the search bar is getting an overhaul via ADG 3 (coming soon) and currently being explored by Confluence in the Simplify work.

            I just had one of my users tell me yesterday that they didn't even notice the quick search field until I had specifically pointed it out to them in some training.

            Christopher DeMattio added a comment - I just had one of my users tell me yesterday that they didn't even notice the quick search field until I had specifically pointed it out to them in some training.

            Jim Cork added a comment -

            Surely this is a quick fix, Atlassian?

            Jim Cork added a comment - Surely this is a quick fix, Atlassian?

            I agree. The new background color for the quick search box makes it difficult to locate. Even as long time JIRA user, I had a difficult time finding the box. Definitely a poor UI/UX choice.

            Christopher DeMattio added a comment - I agree. The new background color for the quick search box makes it difficult to locate. Even as long time JIRA user, I had a difficult time finding the box. Definitely a poor UI/UX choice.

            Rajesh Nayak added a comment - - edited

            Please make the QuickSearch background color configurable or change it to a more visible color.
            Our corporate identity layout is dark-blue and the search field is nearly invisible.

            Magnifying glass icon is just to indicate that this highlighted area is a search box.
            Yes it still need a keyboard action, after text is entered.
            Having a button to click, is not possible at this time, with available JIRA's options.

            Rajesh Nayak added a comment - - edited Please make the QuickSearch background color configurable or change it to a more visible color. Our corporate identity layout is dark-blue and the search field is nearly invisible. Magnifying glass icon is just to indicate that this highlighted area is a search box. Yes it still need a keyboard action, after text is entered. Having a button to click, is not possible at this time, with available JIRA's options.

            Even in IE "Search" box is not showing "Search" word. However, it is working fine in another browser.

            Dattatray Borude added a comment - Even in IE "Search" box is not showing "Search" word. However, it is working fine in another browser.

            Please make the QuickSearch background color configurable or change it to a more visible color.
            Our corporate identity layout is dark-blue and the search field is nearly invisible.

            Karmen Albrecht added a comment - Please make the QuickSearch background color configurable or change it to a more visible color. Our corporate identity layout is dark-blue and the search field is nearly invisible.

            Dattatray Borude added a comment - - edited

            Dattatray Borude added a comment - - edited +1 https://answers.atlassian.com/questions/5703179/how-to-change-quick-search-box-color-in-jira-6.3

              Unassigned Unassigned
              dsjauwmook davy
              Votes:
              34 Vote for this issue
              Watchers:
              32 Start watching this issue

                Created:
                Updated:
                Resolved: