CODEWITHSUNDEEP
cssgoogle-chromeplaceholder
GN.
GN.

Reputation: 9819

CSS placeholder attribute: How to set it's width in Chrome

https://codepen.io/stoplion/pen/bWoPLP

I've tried a number of ways to get this placeholder's background to not look like a display block (setting it's position to absolute, setting it's width) but nothing seems to work.

Any idea how to make the background 'hug' the text as it would in an inline element?

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}


input {
  padding: 10px;
  width: 400px;
}

input {
  @include placeholder {
    transform: translateX(-9px);
    background-color: rgba(29, 146, 237, 0.15);
    padding: 5px 5px;
    color: #333;
    float: left;
    width: 20px;
  }
}

Edit Inspecting the shadow dom element.. the input::-webkit-input-placeholder appears to get a display: block !important;

Better question is.. How to change the -webkit-input-placeholder to an inline element?

Upvotes: 1

Views: 1625

Answers (2)

Joga Luce
Joga Luce

Reputation: 39

Increase your specificity. try label + input {

https://codepen.io/anon/pen/JNrgjZ

Upvotes: 1

rob-k
rob-k

Reputation: 29

Removing the transform: translateX(-9px); line makes the input text and background line up flush with the cursor.

https://codepen.io/anon/pen/oWGrad

Removing the padding could take out the whitespace as needed too.

Upvotes: 1

Related Questions