placeholderの表示を残したまま、valueの値を表示する方法が知りたいです。

Question

画像のようにplaceholderを表示したままの状態で、値を選択したいのですが、うまく実装できません。
valueコードを書くとplaceholderが消えてしまいます。
ディベロッパーツールを見たのですがわたしにはわかりませんでした。

画像の選択バーは「国/地域」の表示を変えずに選択できるのですがどうすればいいのでしょうか？
ご教示願います。

＜試したこと＞
・z-indexを指定
・line-heightの変更

下記のコードは私が書いたコードです。（これだとplaceholderがvalueに上書きされてしまいます）

<form action="" method="post" class="m-form">
 <input type="text" autocomplete="on" list="p-list" name="place" id="registration" value="日本（+81)" placeholder="国/地域">
</form>

#registration {
  line-height: 55px;
  width: 500px;
  border: solid 1px #B0B0B0;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  margin: 40px auto 0 auto;
}
#registration::placeholder {
  font-size: 12px;
  transform: translate(10px, -10px);
}

Comments

[yambejp]

それはplaceholderの機能ではないですが、別の処理で良いでしょうか？

[chair]

すいません、他の方のコメントで解決いたしました。
コメントして頂きありがとうございました！

Answer 1

もはやplaceholderではないですし、placeholder属性を使うことにはならないと思いますが、例として、labelで書いて逃がすとかですかね。
Materialize - Text Inputs

他にも探せばいろいろ出てきます。

Comments

[chair]

そうでしたか！

見た目だけで判断し、勘違いしてしまいました。
ありがとうございました！