Как изменить стиль type="text"?

Question

[Ян Ветров]

Допустим, у меня есть код:

<div><span>NickName</span></div>

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

Answer 1

[Lumore]

input[type="text"] {
   background: transparent;
   border: none;
   outline: none;
   padding: 0;
   margin: 0;
}

Comments

[Ян Ветров]

Спасибо большое, помогло.

Answer 2

[Ankhena]

Либо вставить input и стилизовать его как в ответе Lumore
Либо использовать атрибут contenteditable для span https://webref.ru/html/attr/contenteditable