Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I apply a CSS style to an element name?

People also ask

How do I apply a CSS to a specific element?

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.

What are 3 ways you can apply CSS to an 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.

How do I change the style of an element in CSS?

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.