css float выберите название поля по клику

Question

Я бы хотел, чтобы поле выбора действовало так же, как два других поля ввода.После того, как пользователь заполняет поля, заголовок поля плавает сверху.Как сделать так, чтобы элемент выбора также вел себя как два других поля ввода?так что, нажав на поле, заполнитель должен всплыть наверх.И значение по умолчанию, отображаемое в качестве заполнителя: Ваше письмо , которое затем будет перемещаться вверх после выбора буквы или щелчка по полю.

body {
  font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
}


form {
  margin: 2em 0;
}
.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}
label, input {
  transition: all 0.2s;
  touch-action: manipulation;
}
input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
}
::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
input:focus::-webkit-input-placeholder {
  opacity: 1;
}
input:not(:placeholder-shown) + label,
input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
}

 form p select, form p select.selectField {
	width: 195px;
	padding: 1px 3px;
}

  <form action="">
  <div class="field">
    <input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed">
    <label for="fullname">Name</label>
  </div>
  
  <div class="field">
    <input type="email" name="email" id="email" placeholder="jane.appleseed@example.com">
    <label for="email">Email</label>
  </div>
    <div id="lettersSelection" >
      <p class="required">
        <select name="letters" id="letters" class="selectField" required="">
          <option value="" selected disabled hidden>Your Letter</option>
          <option value="A">Letter A</option>
          <option value="B">Letter B</option>
          <option value="C">Letter C</option>
        </select>
        <label for="letters">Letters</label>
      </p>
    </div>
  </form>

Answer 1

Это в точности , что вы просили.

Я пометил строки в CSS , где были внесены изменения.
Я также добавил дополнительный элемент к HTML :

<span class="placeholder">Your Letter</span>

body {
  font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
}

form {
  margin: 2em 0;
}

.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}

label{
  display: inline-block; /* <--- needed to have display other than default "inline" */
}

label,
input,
.placeholder{ /* <--- added ".placeholder" */
  transition: .2s;
  touch-action: manipulation;
}

input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

input:placeholder-shown+label, 
.placeholder { /* <--- added ".placeholder" */
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
}

::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}

input:focus::-webkit-input-placeholder {
  opacity: 1;
}

input:not(:placeholder-shown)+label,
input:focus+label {
  transform: none; /* <--- changed to "none" to restore defaults */
  cursor: pointer;
}

form p select,
form p select.selectField {
  width: 195px;
  padding: 5px;  /* <--- bigger value to cover the placeholder text */
}

/* ------- ADDED ------ */
#lettersSelection{ position:relative; margin-top:3em; }

#lettersSelection .placeholder{
  position: absolute;
  top: -1.8rem;
  left: 0;
}

select{ position:relative; z-index:1; }

select:focus + .placeholder{
  transform: none; /* <--- moves the title up on "focus" */
}

<form action="">
  <div class="field">
    <input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed">
    <label for="fullname">Name</label>
  </div>

  <div class="field">
    <input type="email" name="email" id="email" placeholder="jane.appleseed@example.com">
    <label for="email">Email</label>
  </div>
  
  <div id="lettersSelection">
    <p class="required">
      <select name="letters" id="letters" class="selectField" required>
        <option value="" selected disabled hidden>Your Letter</option>
        <option value="A">Letter A</option>
        <option value="B">Letter B</option>
        <option value="C">Letter C</option>
      </select>
      <span class="placeholder">Your Letter</span>
      <label for="letters">Letters</label>
    </p>
  </div>
</form>