Как установить .Входной [тип = текст] только для одного текстового поля

Question

Так я работаю над проектом, и я анимированный поиска текстовое поле, как показано здесь:

input[type=text] { 
 
    width: 130px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url('searchicon.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
    height: 30px; 
 
} 
 

 
input[type=text]:focus { 
 
    width: 700px; 
 
}

<input type="text" name="search" placeholder="Search..">

Все работает отлично, но теперь у меня есть проблема, у меня больше текстовых полей на одной странице, и я не хочу, чтобы они были анимированы как этот, потому что вход [type = text] меняет их все. Любая помощь будет оценена очень много.

Answer 1

Вам нужно изменить селектор css, чтобы быть более конкретным d только input[type=text] до, возможно, input[name=search]

Answer 2

Есть несколько способов, которые:

• использовать класс или идентификатор в input

input[type="text"] { 
 
    width: 130px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url('searchicon.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    height: 30px; 
 
} 
 

 
input[type="text"]:focus { 
 
    width: 700px; 
 
} 
 

 
#animated { 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
}

<input id="animated" type="text" name="search" placeholder="Search.."> 
 
<hr /> 
 
<input type="text" name="search" placeholder="Search..">

• использовать другой атрибут, в этом case [name="search"]

input[type="text"] { 
 
    width: 130px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url('searchicon.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    height: 30px; 
 
} 
 

 
input[type="text"]:focus { 
 
    width: 700px; 
 
} 
 

 
input[name="search"] { 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
}

<input type="text" name="search" placeholder="Search.."> 
 
<hr /> 
 
<input type="text" name="whatever" placeholder="Search..">

Answer 3

Предполагая, что вы не хотите, чтобы добавить идентификатор или класс, а затем изменить селектор в это ...

input[name="search"] 

Answer 4

Вы можете использовать селектор CSS, например, :first-child, чтобы выбрать первый вход на вашем сайте.

input[type=text] { 
 
       width: 130px; 
 
       box-sizing: border-box; 
 
       border: 2px solid #ccc; 
 
       border-radius: 4px; 
 
       font-size: 16px; 
 
       background-color: white; 
 
       background-image: url('searchicon.png'); 
 
       background-position: 10px 10px; 
 
       background-repeat: no-repeat; 
 
       padding: 12px 20px 12px 40px; 
 
       -webkit-transition: width 0.4s ease-in-out; 
 
       transition: width 0.4s ease-in-out; 
 
       height: 30px; 
 
      } 
 

 
      input[type=text]:first-child:focus { 
 
       width: 700px; 
 
      }

<input type="text" name="search" placeholder="Search.."> 
 
<hr> 
 
<input type="text" name="search" placeholder="Search..">

Другой способ установить id для конкретного входного селектора анг изменить CSS для #givenID:focus.

input[type=text] { 
 
        width: 130px; 
 
        box-sizing: border-box; 
 
        border: 2px solid #ccc; 
 
        border-radius: 4px; 
 
        font-size: 16px; 
 
        background-color: white; 
 
        background-image: url('searchicon.png'); 
 
        background-position: 10px 10px; 
 
        background-repeat: no-repeat; 
 
        padding: 12px 20px 12px 40px; 
 
        -webkit-transition: width 0.4s ease-in-out; 
 
        transition: width 0.4s ease-in-out; 
 
        height: 30px; 
 
       } 
 

 
       #inputID:focus { 
 
        width: 700px; 
 
       }

<input id="inputID" type="text" name="search" placeholder="Search.."> 
 
<hr> 
 
<input type="text" name="search" placeholder="Search..">

Answer 5

Добавить класс в ввода текста, например animated

<input type="text" class="animated" name="search" placeholder="Search.."> 

Затем в CSS, изменить его следующим образом:

input.animated:focus { 
    width: 700px; 
}