Как сделать автоматический переход на входе ⇐ CSS

[Anonymous]

Задача состоит в том, чтобы сделать переход к следующему вводу, если я нажимаю Enter, а также когда мой текст достигнет конца ввода, так что он переходит к следующей строке
В будущем я буду использовать эту форму в PHP Codeginiter, чтобы вы могли написать ответ для него
, я хотел бы избежать JS, особенно в тех случаях, когда есть и есть

, если это возможно, я хотел бы избежать JS. /> html: < /p>

Код: Выделить всё

My Note



Выполнено
Важное
Отложеное
В процессе


Date





Note:













ID: 1




< /code>
css: < /p>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.note {
background-color: rgba(172, 255, 47, 0.63);
width: 400px;
height: 550px;
margin: 0 auto;
padding: 40px 30px 10px 30px;
color: black;
text-shadow: #33333381 1px 1px 1px;
}

.form-header {
display: flex;
align-items:end;
justify-content: space-between;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 480px;
}
.green{
color: green;
background-color: lightgreen;
}
.red{
color: red;
background-color: tomato;
}

.gray{
color: gray;
background-color: lightgray;
}
select {
text-align: right;
background-color: transparent;
border: none;
border-radius: none;
font-weight: 600;
}

select:focus {
background-color: transparent;
border: none;
outline: none;
border-radius: none;
}

option{
margin: 5px;
width: 100px;
border-radius: none;
text-align: center;
padding: 5px;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-date {
display: flex;
gap: 10px;
justify-content: right;
}

input[type="date"] {
border: none;
background-color: transparent;
width: 18px;

}
.container-flex > .form-group{
gap: 10px;
}

.form-group input[type = "text"] {
background-color: transparent;
border: none;
border-bottom: 1px solid #333;
}

input:focus {

outline: none;
}

Если есть какие -либо неясные моменты, вы можете уточнить, я буду редактировать Post

Подробнее здесь: https://stackoverflow.com/questions/796 ... n-on-input