Golf Wars Episode I: The Phantom Lightsabers
HTML/CSS solution, 765 740 541 bytes



&lt;style&gt;[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}&lt;/style&gt;&lt;div id=Jedi&gt;&lt;table&gt;&lt;td&gt;&lt;td&gt;&lt;/table&gt;&lt;table&gt;&lt;td&gt;&lt;td&gt;&lt;/table&gt;&lt;/div&gt;&lt;table id=Sith&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;/table&gt;


The recent refactor uses the :target pseudo-class rather than a &lt;form&gt; and Javascript.

To enter either input, add it to the end of the URL as a target, e.g. test.html#Jedi or test.html#Sith

Here it is again with whitespace and a few comments:

&lt;style&gt;
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  td:nth-last-child(2) {
    background:#888; width:180px; box-shadow:none!important }
&lt;/style&gt;
&lt;div id=Jedi&gt;
  &lt;table&gt;&lt;td&gt;&lt;td&gt;&lt;/table&gt;
  &lt;table&gt;&lt;td&gt;&lt;td&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;table id=Sith&gt;&lt;td&gt;&lt;td&gt;&lt;td&gt;&lt;/table&gt;


The lightsabers are &lt;table&gt; elements with one cell per part (blade/handle) that are unhidden via their id attributes.

The blades are colored with CSS box-shadows and the Jedi lightsabers undergo a transform: rotate().

Pictures or it didn't happen (click for full res):



If you add td{background:#fff}body{background:#000} to the CSS, you'll get a cool dark view.

Tested in Firefox and Chrome (on Linux).  Note that this is not at all standards-compliant, as I was trying to shrink the size as much as possible.

Thanks to @manatwork for border-spacing and :target.