I just give up to find where I can change it.

Probably it's ridiculous but i can't find where to remove the light blue border around the search field on the header when it is "on focus".

Does anybody could help me on that?


I think I found it. Here is where you can change it: go to ->


then look for:

.input-text:focus { border: 1px solid #3399cc;}
  • Worth noting removing focus styling is a big accessibility no no a11yproject.com/posts/never-remove-css-outlines worth a read, maybe try replacing focus styling to fit in with your sites design. – Bobadevv Jan 26 '16 at 18:04
  • Bobadevv I'm not trying to remove it I just want to stylize like the post says, the problem is I can't found where in the CSS file I can do it. – Filipe Marques Jan 26 '16 at 19:23
  • MagentoUser, if this class is the one in the line 2637 I've already tried to change the color to black but the color remains the same. This is something really weird! – Filipe Marques Jan 26 '16 at 19:25
  • Try to remove the styling first. Try to play with it. Because it works for me. If not, if you can please also post the code in your post :) Thanks. – MagentoUser Jan 27 '16 at 0:50

Well, I think I got it. The input tag has a "search" id. We can found it on line 3693 of the style.css. I put myself the outline-color attribute on this id and using the recomendation of friend Bobadevv I just set the outline-color to the same color of the background. Voila.

  • So is the focus styling now not visible if its the same as its parent background colour? – Bobadevv Jan 26 '16 at 21:33
  • Yes. But probably this splution won't work if needed to use background image... In this case you need to use display:none; – Filipe Marques Jan 27 '16 at 19:24
  • I think the idea is you shouldn't remove the focus styling it should be recognisable by users who may tab through websites – Bobadevv Jan 27 '16 at 20:11

Why don't you try to enable template path hints and located from where is it rendering ?
System/configuration/advanced/Developer , then switch on the top the view Current Configuration Scope: to your_store_view and on developer enable the template path hints
btw do you speak about default RWD template or is it customized?

  • Thanks for your response, but it is not necessary as you can find it using the Chrome developer tool. Anyway I've checked form,mini.phtml and there isn't anything there different from what the tool is informing. I am customizing the default RWD template. – Filipe Marques Jan 26 '16 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.