如何添加CSS爲特定輸入類型的文本

我有一個問題

我不能讓一個以上的CSS的一些輸入字段

這是場我

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

和CSS是

input 
{ 
    background-image:url('images/fieldBG.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:235px; 
}

我要打的第一個字段（名字），這個CSS

input 
{ 
    background-image:url('images/fieldBG.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:235px; 
}

，第二個（lastName的）這個CSS

input 
{ 
    background-image:url('images/fieldBG2222.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
}

幫助請:-)

來源

2012-05-14 sulaiman

[CSS選擇器（http://www.w3.org/TR/CSS2/selector.html）的[什麼HTML/CSS，你會用它來創建與背景的文本輸入 – Musa

可能重複？ ]（http://stackoverflow.com/questions/526548/what-html-css-would-you-use-to-create-a-text-input-with-a-background） – ghoppe

@Musa - 這是一個有點更容易閱讀。 HTTP：//net.tutsplus。com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ –

使用ID選擇器。

CSS：

input{ 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
} 

#firstname{ 
    background-image:url('images/fieldBG.gif'); 
} 
#lastname{ 
    background-image:url('images/fieldBG2222.gif'); 
}

HTML：

<input type="text" ID="firstname" name="firstName" />  
<input type="text" ID="lastname" name="lastName" />

您所有的投入將與通用輸入樣式風格，兩個特殊的人將不得不ID選擇指定的樣式。

來源

2012-05-14 18:57:32

你可以按類型進行設置或使用CSS命名錶單元素。

input[type=text] { 
    //styling 
} 
input[name=html_name] { 
    //styling 
}

來源

2012-05-14 18:54:17 Andrew

在這種情況下，html_name是名字/姓氏 – Andrew

但你應該在值周圍加上引號（不確定它是否工作）。就像'input [type =「text]' - 這就是我一直使用它的原因.. – Dion

@ DRP96實際上是正確的，我只寫了一個通用語句（引號應該隱式添加）。 – Andrew

添加一個「身份證」的標籤，以您的每一個輸入：

<input type="text" id="firstName" name="firstName" /> 
<input type="text" id="lastName" name="lastName" />

，那麼你可以使用#selector在CSS抓住每一個。

input { 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
} 

#firstName { 
    background-image:url('images/fieldBG.gif'); 
    width:235px; 
} 

#lastName { 
    background-image:url('images/fieldBG2222.gif'); 
    width:125px; 
}

來源

2012-05-14 18:55:19 miniMacGuru

你必須改變你的HTML文件：

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

...到：

<input type="text" id="FName" name="firstName" /> 
<input type="text" id="LName" name="lastName" />

並修改CSS文件：

input { 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
} 


#FName { 
    background-image:url('images/fieldBG.gif'); 
} 


#LName { 
    background-image:url('images/fieldBG2222.gif'); 
}

好運！

來源

2013-02-13 13:13:53 Ashu

使用類風格。他們是更好的解決方案。使用類可以單獨設置每種輸入類型。

<html> 
    <head> 
     <style> 
      .classnamehere { 
       //Styling; 
      } 
     </style> 
    </head> 

    <body> 
     <input class="classnamehere" type="text" name="firstName" /> 
    </body> 
</html>

來源

2015-04-07 18:52:55 DeathRs

如何添加CSS爲特定輸入類型的文本

回答

相關問題