Bisakah saya menerapkan gaya CSS ke nama elemen?

Saat ini saya sedang mengerjakan proyek di mana saya tidak memiliki kendali atas HTML yang saya gunakan untuk menerapkan gaya CSS. Dan HTML tidak diberi label dengan sangat baik, dalam arti bahwa tidak ada cukup id dan deklarasi kelas untuk membedakan antara elemen.

Jadi, saya mencari cara saya bisa menerapkan gaya ke objek yang tidak memiliki atribut id atau kelas.

Terkadang, item formulir memiliki atribut "nama" atau "nilai":

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

Apakah ada cara saya bisa menerapkan gaya berdasarkan nama = "goButton"? Bagaimana dengan "nilai"?

Ini adalah jenis hal yang sulit ditemukan karena pencarian Google akan menemukan semua jenis contoh di mana istilah luas seperti "nama" dan "nilai" akan muncul di halaman web.

Saya agak curiga jawabannya tidak ... tapi mungkin seseorang memiliki peretas cerdas?

Saran apa pun akan sangat dihargai.

Anda dapat menggunakan pemilih atribut,

input[name="goButton"] {
  background: red;
}

<input name="goButton">

Ketahuilah bahwa itu tidak didukung di IE6.

Pembaruan: Pada tahun 2016 Anda dapat menggunakannya sebanyak yang Anda inginkan, karena IE6 sudah mati. http://quirksmode.org/css/selectors/

http://reference.sitepoint.com/css/attributeselector

Contoh Input Teks

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

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

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

Anda dapat menggunakan pemilih atribut tetapi mereka tidak akan bekerja di IE6 seperti kata meder, ada solusi javascript untuk itu. Periksa Selectivizr

Lebih detail mengenai penyeleksi atribut: 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 }

Untuk googler di masa mendatang, FYI, metode dalam jawaban oleh @meder, dapat digunakan dengan elemen apa pun yang memiliki atribut nama, jadi katakanlah ada <iframe>dengan nama xyzmaka Anda dapat menggunakan aturan sebagai berikut.

iframe[name=xyz] {    
    display: none;
}   

The nameatribut dapat digunakan pada unsur-unsur berikut:

• <button>
• <fieldset>
• <form>
• <iframe>
• <input>
• <keygen>
• <map>
• <meta>
• <object>
• <output>
• <param>
• <select>
• <textarea>

Jika saya mengerti pertanyaan Anda saat itu,

Ya, Anda dapat mengatur gaya elemen individual jika id atau namanya tersedia,

misalnya

jika id tersedia maka kamu bisa mendapatkan kontrol atas elemen seperti,

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

var v_obj = document.getElementsById('goButton');

v_obj.setAttribute('style','color:red;background:none');

lain jika nama tersedia maka Anda dapat mengontrol elemen seperti,

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

var v_obj = document.getElementsByName('goButton');

v_obj.setAttribute('style','color:red;background:none');

Menggunakan [name=elementName]{}tanpa tag sebelumnya juga akan berfungsi. Ini akan memengaruhi semua elemen dengan nama ini.

Sebagai contoh:

[name=test] {
  width: 100px;
}

<input type=text name=test>
<div name=test></div>

Ini adalah pekerjaan yang sempurna untuk pemilih kueri ...

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

Anda kemudian dapat mengulangi koleksi ini untuk beroperasi pada elemen yang ditemukan.

jika seandainya Anda tidak menggunakan nama dalam input tetapi elemen lain, maka Anda dapat menargetkan elemen lain dengan atribut di sana.

    [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">

semoga membantu. Terima kasih

Sudahkah Anda menjelajahi kemungkinan menggunakan jQuery? Ini memiliki model pemilih yang sangat menjangkau (mirip dalam sintaksis dengan CSS) dan bahkan jika elemen Anda tidak memiliki ID, Anda harus dapat memilihnya menggunakan hubungan orangtua -> anak -> cucu. Setelah Anda memilihnya, ada pemanggilan metode yang sangat sederhana (saya lupa nama persisnya) yang memungkinkan Anda menerapkan gaya CSS ke elemen.

Seharusnya mudah digunakan dan sebagai bonus, Anda kemungkinan besar akan sangat kompatibel lintas platform.