如何設定。輸入[類型=文本]只爲一個文本框

所以我工作的一個項目，我的動畫搜索文本框如下所示：如何設定。輸入[類型=文本]只爲一個文本框

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]正在改變他們。任何幫助將不勝感激。

來源

2017-02-22 Rafael Ribeiro

添加一個'class'或'id'，並選擇它。 –

你不能使用課堂嗎？或者直接使用[：nth-child]（https://developer.mozilla.org/en/docs/Web/CSS/:nth-child）或[：first-of-type]（https：// css-tricks .com /年曆/選擇器/ f/first-of-type /）只能選擇一個 – GillesC

您需要改變你的CSS選擇器是更具體的instea d只是input[type=text]也許input[name=search]

來源

2017-02-22 14:40:30

很有效100％thx！ –

有幾種方法可以是：

使用一類或ID在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..">

使用另一個屬性，在此案例[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..">

來源

2017-02-22 14:36:57 dippas

假設你不想添加一個ID或類，然後改變你的選擇來此...

input[name="search"]

來源

2017-02-22 14:37:27 Slime

可以使用例如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到特定輸入ANG改變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..">

來源

2017-02-22 14:37:59 Arkej

類添加到您輸入的文字，比如animated

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

然後在你的CSS，修改這樣的：

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

來源

2017-02-22 14:38:22

如何設定。輸入[類型=文本]只爲一個文本框

回答

相關問題