The CSS id Selector The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded method, CSS is stored as part of the HTML page, in the header section.
Styles can be added to elements inline. Add the text to an object that has a style to override the one created by creating and appending a new *style> element. Ensure you modify any CSS rules you need.
You can use the attribute selector,
input[name="goButton"] {
background: red;
}
<input name="goButton">
Be aware that it isn't supported in IE6.
Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/
http://reference.sitepoint.com/css/attributeselector
Text Input Example
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">
You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check Selectivizr
More detailed into on attribute selectors: http://www.css3.info/preview/attribute-selectors/
/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
For future googlers, FYI, the method in the answer by @meder , can be used with any element that has a name attribute, so lets say theres an <iframe>
with the name xyz
then you can use the rule as belows.
iframe[name=xyz] {
display: none;
}
The name
attribute can be used on the following elements:
<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>
Using [name=elementName]{}
without tag before will work too.
It will affect all elements with this name.
For example:
[name=test] {
width: 100px;
}
<input type=text name=test>
<div name=test></div>
If i understand your question right then,
Yes you can set style of individual element if its id or name is available,
e.g.
if id available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById('goButton');
v_obj.setAttribute('style','color:red;background:none');
else if name is available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName('goButton');
v_obj.setAttribute('style','color:red;background:none');
This is the perfect job for the query selector...
var Set1=document.querySelectorAll('input[type=button]'); // by type
var Set2=document.querySelectorAll('input[name=goButton]'); // by name
var Set3=document.querySelectorAll('input[value=Go]'); // by value
You can then loop through these collections to operate on elements found.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With