The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. Check out the demo.

The technology is pretty similar to that was used on our mediaplana contact site called niceforms (demo here) by badboy. An example is shown below.

If you have a good example for awesome looking forms, please let us know and post it as a comment.

(Quelle links: Webmaster Resource).
Trotz kleinerer Anpassungen bleibt der langweilige graue (bzw. hier blaue) Pfeil und bei längeren Menüs kommen die unformartierbaren Scrollbalken.

Manchmal reicht dies jedoch nicht aus und größere Anpassungen müssen gemacht werden. Und es ist möglich!!

In meinen Archiven fand ich 2 Beiträge aus dem Jahr 2005 die genau dies behandeln (Select Something New, Part 1 und Select Something New, Part 2). Leider scheint diese Art von Technik nicht weit verbreitet zu sein, so dass ich hierfür Werbung machen und neue (bzw. ältere) Gestaltungswege für Formulare aufzeigen möchte.

Für diejenigen unter Euch die gleich loslegen wollen, hier der Code. Ihr müsst ihn nur noch an Eure Bedürfnisse anpassen.

Select Replacement Test Form

Header

 <style type=“text/css”>
body {
font: 80% “Trebuchet MS”, verdana, helvetica, arial, sans-serif;
}
input {
display: block;
margin: 0 0 10px;
border: 1px solid #666;
color: #999;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
label {
display: block;
font-weight: bold;
color: #666;
}
select {
display: block;
width: 300px;
}
select.replaced {
display: none;
}
ul.selectReplacement {
background: url(top.jpg) top left no-repeat;
margin: 0;
padding: 0;
height: 1.65em;
width: 300px;
}
ul.selectReplacement li {
background: #cf5a5a;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 276px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: url(bottom.gif) bottom left no-repeat;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #9e0000;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #9e0000;
color: #fff;
}
</style>
<script type=“text/javascript”>
// <![CDATA[
function selectReplacement(obj) {
obj.className += ‘ replaced’;
var ul = document.createElement(’ul’);
ul.className = ’selectReplacement’;
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement(’li’);
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = ’selected’;
li.onclick = function() {
this.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ‘ hover’;
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(” hover\\b”), ”);
}
}
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName(’li’);
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className=”;
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className=’selected’;
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(” selectOpen\\b”), ”);
obj.onclick = function() {
obj.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
}
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName(’select’);
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
}
// ]]>
</script>

Body

<form action=“#” method=“post”>
<fieldset>
<legend>Sample Form</legend>
<label for=“something”>Select to Replace</label>
<select id=“something” name=“something”>
<option value=“1″>This is option 1</option>
<option value=“2″>This is option 2</option>
<option value=“3″>This is option 3</option>
<option value=“4″>This is option 4</option>
<option value=“5″ selected=“selected”>This is option 5</option>
<option value=“6″>This is option 6</option>
<option value=“7″>This is option 7</option>
<option value=“8″>This is option 8</option>
</select>
</fieldset>
</form>