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

Question

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.

Maybe right click, go to web inspector and examine the CSS hierarchy on that element to find what is overriding your rules — Kinglish, Jan 03 '22 at 20:24
... It's not clear or I wouldn't be here asking. You clearly don't know either. — little tiny man, Jan 04 '22 at 19:02

Prateek · Answer 1 · 2022-01-03T20:56:30.143

2

That is not text. That is placeholder.

please add below to css

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

edited Jan 03 '22 at 20:56

answered Jan 03 '22 at 20:46

Prateek

374
3
7

white-space: nowrap fixed it for me – HandiworkNYC.com Jan 05 '23 at 20:28

score 1 · Answer 2 · answered Jan 03 '22 at 20:51

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'

score 1 · Answer 3 · answered Jan 03 '22 at 21:05

1

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

answered Jan 03 '22 at 21:05

jonu29

389
1
11

Super helpful, thank you. – little tiny man Jan 31 '22 at 22:27

score 1 · Answer 4 · answered Jan 03 '22 at 21:22

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;
    }

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

4 Answers4