Скрывать по фокусу placeholder и добавлять неудаляемое значение в input

Question

Есть input для телефона, в нем введено "телефон" но после клика эта надпись убирается и должно появится '+3' которое нельзя убрать

input {
    height: 59px;
    max-width: 644px;
    width: 100%;
    margin-bottom: 40px;
    border: 0;
    border-bottom: 1px solid #000;
    transition:all 2s ease;
    color:#000;
    outline: none;
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    background-color: transparent;   
}

.input::placeholder {
    color: #fff;
}

.input:focus::-webkit-input-placeholder {opacity:0;}/* webkit */
.input:focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
.input:focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
.input:focus:-ms-input-placeholder      {opacity:0;}/* IE */

<form> 
  <input type="phone" placeholder='телефон'>
</form>

Answer 1

Используйте селектор CSS-комбинатор +. Он выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель:

input {
    box-sizing: border-box;
    outline: none;
    font-style: normal;
    color: #000;
    padding: 0;
    height: 59px;
    max-width: 644px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #000;
    font-weight: 300;
    font-size: 30px;
    background-color: transparent;
}

input:focus::-webkit-input-placeholder {opacity:0;}/* webkit */
input:focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
input:focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
input:focus:-ms-input-placeholder      {opacity:0;}/* IE */

.wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    font-weight: 300;
    font-size: 30px;
}

input:focus {
    padding: 0 0 0 60px;
}

input:focus + .tel {
    opacity: 1;
}

.tel {
    position: absolute;
    top: 0;
    left: 0;
    height: 59px;
    opacity: 0;
    display: flex;
    align-items: center;
}

<form class='wrap'>
    <input type='tel' id='number' value='' placeholder='Телефон'>
    <span class='tel'>+38</span>
</form>

БЛОГ НА HUSL

Скрывать по фокусу placeholder и добавлять неудаляемое значение в input

Ответы (1 шт):