Changes to the search bar

[pcgamer1]

Fixes #685 Search bar is not recognizable for some students when they are new to the website according to Mr. Raymond G McCord who has responded to my poll in the p5 forum on discourse. He said slight design changes would be helpful for the students. Changes: Addition of a magnifying glass to the placeholder according to W3C standards for accessibility. A 3px border for the input element. A darker font color for the the placeholder text.

Screenshots of the change:

[limzykenneth]

The magnifying glass emoji is too out of place and attention grabbing. Instead of making it part of the placeholder, can it instead be an :after element attached to the search bar with a simple image background and aligned to the right side of the search bar?

It doesn't need to be hidden even when the user is typing on the box, just need to make sure the text doesn't overlap with the image.

[pcgamer1]

@limzykenneth I am working on it.

[pcgamer1]

@limzykenneth How does this look?

[limzykenneth]

I'd prefer the magnifying glass to be a simple monochrome image and for it to be inside the box.

[pcgamer1]

@limzykenneth working on that.

[pcgamer1]

@limzykenneth How does this look?

[limzykenneth]

Much better, maybe make the image's outline color match the placeholder text's color.

[pcgamer1]

@limzykenneth I haven't loaded an image in for the icon, it's just an unicode character rotated towards right. I don't think I'll be able to change the outline. Should I try a loading an image if you want the outline to be grey?