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?
Add a comment
|
3 Answers
I think I found it. Here is where you can change it: go to ->
magento/skin/frontend/default/blank/css/styles.css
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.– BobadevvCommented Jan 26, 2016 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. Commented Jan 26, 2016 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! Commented Jan 26, 2016 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. Commented Jan 27, 2016 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?– BobadevvCommented Jan 26, 2016 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; Commented Jan 27, 2016 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– BobadevvCommented Jan 27, 2016 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. Commented Jan 26, 2016 at 19:18