Wie stellt .input [type = text] nur für eine Textbox

Question

Also an einem Projekt arbeite ich und ich animierte eine Suche Textbox wie hier gezeigt:

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..">

Alles funktioniert gut, aber jetzt habe ich ein Problem, ich habe mehr Textfelder auf der gleichen Seite und ich möchte nicht, dass sie wie dieses animiert werden, weil die Eingabe [type = text] sie alle verändert. Jede Hilfe wird sehr geschätzt.

Answer 1

Sie benötigen Ändern Sie Ihren CSS-Selektor, um spezifischer zu sein d von nur input[type=text] zu vielleicht input[name=search]

Answer 2

Es gibt ein paar Möglichkeiten, dass:

• Verwendung eine Klasse oder eine ID in der 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..">

• ein anderes Attribut verwenden, in diesem Fall [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

Angenommen, Sie möchten keine ID oder Klasse hinzuzufügen, dann Wähler dies ändern ...

input[name="search"] 

Answer 4

Sie können zum Beispiel einen CSS-Selektor :first-child, um die erste Eingabe auf Ihrer Website zu wählen.

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..">

Ein anderer Weg ist id auf den jeweiligen Eingang ANG Änderung CSS-Selektor auf #givenID:focus einzustellen.

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

eine Klasse Ihren eingegebenen Text hinzufügen, wie animated

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

dann in Ihrem CSS, ändern Sie es wie folgt aus:

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