What on earth is causing this input placeholder text to not text-align to anything but center?-CodePudding

So I've been fighting with this for maybe a week off and on and every time I end up eventually giving up. There's a "search bar" input at the top right of this website I'm working on here. There's lots of information on text-aligning the placeholder text for inputs like this right here on StackOverflow and I've built out lots of these without ever having an issue with this. But for some reason on this site, I can't just apply something like 'text-align: left;', the text remains centered. I know this is a dumb question but I'm really confused on what's causing this. I can't seem to recreate this in a CodePen at all, it always behaves as expected everywhere except for on this production site.

Does anyone know why this specific input seems to not respond to "text-align: left;"? I'm using Chrome but every browser I've tested displays this the same way - centered placeholder text no matter what I do. I think I'm missing something simple here but I don't have a clue what it is.

CodePudding user response：

I've looked into the code and I honestly have no idea what is causing this but I have a solution :)

<style>
   .search::-webkit-input-placeholder{
      text-align: left !important;
   }
</style>

Set the important tag to tell the browser that that thingie maginie is important and set the property to the placeholder of the '.search'

CodePudding user response：

That is not text. That is placeholder.

please add below to css

input.form-control.search::placeholder {
    float: left;
}

CodePudding user response：

Probably, he know what is a placeholder. The problem is text-align: center from your placeholder. If you want to see it with developer tools:

The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools. Thank to Sean Anderson for the answer

Also you can edit your placeholder using vendor-prefixed selectors

CodePudding user response：

There is a setting in the style.css file:

  .header-main .search-wrapper .search::-webkit-input-placeholder {
     text-align: center;
    }

It's got quite a high specificity so worth copying the lot and simply doing:

  .header-main .search-wrapper .search::-webkit-input-placeholder {
     text-align: left;
    }