Can I apply a CSS style to an element name?

Question

I'm currently working on a project where I have no control over the HTML that I am applying CSS styles to. And the HTML is not very well labelled, in the sense that there are not enough id and class declarations to differentiate between elements.

So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.

Sometimes, form items have a "name" or "value" attribute:

<input type="submit" value="Go" name="goButton">

Is there a way I can apply a style based on name="goButton"? What about "value"?

It's the kind of thing that's hard to find out because a Google search will find all sorts of instances in which broad terms like "name" and "value" will appear in web pages.

I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?

Any advice would be greatly appreciated.

score 399 · Accepted Answer · edited Sep 21 '19 at 00:32

399

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

edited Sep 21 '19 at 00:32

dota2pro

7,220
7
44
79

answered Mar 29 '11 at 06:33

meder omuraliev

183,342
71
393
434

score 57 · Answer 2 · edited Sep 21 '19 at 00:33

57

Text Input Example

input[type=text] {
  width: 150px;
}

input[name=myname] {
  width: 100px;
}

<input type="text">
<br>
<input type="text" name="myname">

edited Sep 21 '19 at 00:33

dippas

58,591
15
114
126

answered May 18 '13 at 12:29

MRRaja

1,073
12
25

score 22 · Answer 3 · answered Mar 29 '11 at 06:38

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 }

Mohd Abdul Mujib · Answer 4 · 2016-09-22T10:36:41.710

14

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>

edited Sep 22 '16 at 10:36

answered Sep 20 '16 at 13:33

Mohd Abdul Mujib

13,071
8
64
88

3

this doesn't really add anything to the question. The `name` attribute can be put on anything if you really wanted to – Isaac Oct 05 '16 at 23:25
Moreover, some people don't use Google search engine. Therefore, the word "googlers" is not very inclusive. – gouessej Mar 29 '23 at 14:13

score 6 · Answer 5 · edited Sep 21 '19 at 00:29

6

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>

edited Sep 21 '19 at 00:29

dota2pro

7,220
7
44
79

answered Feb 11 '19 at 10:00

Batsheva Hansav

316
2
11

score 4 · Answer 6 · edited Mar 29 '11 at 16:52

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');

score 2 · Answer 7 · answered Feb 26 '20 at 09:48

if in case you are not using name in input but other element, then you can target other element with there attribute.

    [title~=flower] {
      border: 5px solid yellow;
    }

    <img src="klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="img_flwr.gif" title="flower" width="224" height="162">
    <img src="img_flwr.gif" title="flowers" width="224" height="162">

hope its help. Thank you

score 2 · Answer 8 · answered Jul 18 '20 at 14:42

2

input[type=text] {
  width: 150px;
  length: 150px;
}

input[name=myname] {
  width: 100px;
length: 150px;
}

<input type="text">
<br>
<input type="text" name="myname">

answered Jul 18 '20 at 14:42

auni athirah

21
1

1

Try adding some description to what this code does. It can dramatically improve the quality of your answer. – Christopher Moore Jul 18 '20 at 15:08

score 1 · Answer 9 · answered Jan 11 '18 at 23:39

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.

score -2 · Answer 10 · answered Mar 29 '11 at 06:50

have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).

It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.

Can I apply a CSS style to an element name?

10 Answers10

Linked

Related