简体   繁体   中英

CSS. Placeholder and textbox with different font sizes

I have an input field with the font size 45px. This field should have a placeholder with a font size 18px and vertical alignment of the placeholder should be the middle. I've tried the following code, but it doesn't work in Chrome and Opera.

Could you help me to find a solution without JavaScript.

<input type="text" placeholder="Start typing your postal code..." />

   input {
        width: 300px;
        border: 2px solid red;
        padding: 0px 5px;
        line-height: 100px;
        font-size: 45px;
    }

    ::-webkit-input-placeholder {
        font-size: 18px;
        vertical-align: middle !important;
        line-height: 100px !important;
        color:#000;
        text-align:center;
    }
    ::-moz-placeholder {
        font-size: 18px;
        vertical-align: middle;
        line-height: 100px;
        color: #000;
        text-align: center;
    }
    :-ms-input-placeholder {
        font-size: 18px;
        vertical-align: middle;
        line-height: 100px;
        color: #000;
        text-align: center;
    }
    :-moz-placeholder {
        font-size: 18px;
        vertical-align: middle;
        line-height: 100px;
        color: #000;
        text-align: center;
    }

I think you need to add input before your pseudo element. Try this:

input::-webkit-input-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input::-moz-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input:-ms-input-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input::placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

EDIT

Styling placeholders seems limited. But a way to do it might be to use transform: translate(0, -50%);

input::placeholder {
  font-size: 18px;
  line-height: 100px;
  text-align: center;
  transform: translate(0, -50%);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM