ronde hoeken formulier

[Beasty]

Mijn probleem is dat ik een formulier rond wil maken, dus mijn input moet ronde hoeken krijgen. Nu heb ik al hier op het forum wat zitten te zoeken maar zonder echt goed resultaat. Dan heb ik wat zitten googlen en daar kwam ik op een javascript functie uit, die ze daar met de voorbeelden toch wel redelijk goed kregen. Maar ja de voorbeelden waren nu wel niet toegepast op de input velden maar alleen op de labels... Dus zat ik weer vast...

Dus nu zit ik nog altijd met mijn probleem om mijn input veld ronde hoeken te laten krijgen. Ik hoop bij deze dan ook dat iemand me hierbij kan helpen.
Zal hier ook even de javascript code zetten, misschien dat iemand van hier daar wel ronde hoeken van kan maken in me input veld. Of eventueel dat iemand een andere mogelijkheid weet voor me probleem.

function NiftyCheck(){
if(!document.getElementById || !document.createElement)
    return(false);
var b=navigator.userAgent.toLowerCase();
if(b.indexOf("msie 5")>0 && b.indexOf("opera")==-1)
    return(false);
return(true);
}

function Rounded(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
var l=v.length;
for(i=0;i<l;i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
    }
}

function RoundedTop(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
    AddTop(v[i],bk,color,size);
}

function RoundedBottom(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
    AddBottom(v[i],bk,color,size);
}

function AddTop(el,bk,color,size){
var i;
var d=document.createElement("b");
var cn="r";
var lim=4;
if(size && size=="small"){ cn="rs"; lim=2}
d.className="rtop";
d.style.backgroundColor=bk;
for(i=1;i<=lim;i++){
    var x=document.createElement("b");
    x.className=cn + i;
    x.style.backgroundColor=color;
    d.appendChild(x);
    }
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,color,size){
var i;
var d=document.createElement("b");
var cn="r";
var lim=4;
if(size && size=="small"){ cn="rs"; lim=2}
d.className="rbottom";
d.style.backgroundColor=bk;
for(i=lim;i>0;i--){
    var x=document.createElement("b");
    x.className=cn + i;
    x.style.backgroundColor=color;
    d.appendChild(x);
    }
el.appendChild(d,el.firstChild);
}

function getElementsBySelector(selector){
var i;
var s=[];
var selid="";
var selclass="";
var tag=selector;
var objlist=[];
if(selector.indexOf(" ")>0){  //descendant selector like "tag#id tag"
    s=selector.split(" ");
    var fs=s[0].split("#");
    if(fs.length==1) return(objlist);
    return(document.getElementById(fs[1]).getElementsByTagName(s[1]));
    }
if(selector.indexOf("#")>0){ //id selector like "tag#id"
    s=selector.split("#");
    tag=s[0];
    selid=s[1];
    }
if(selid!=""){
    objlist.push(document.getElementById(selid));
    return(objlist);
    }
if(selector.indexOf(".")>0){  //class selector like "tag.class"
    s=selector.split(".");
    tag=s[0];
    selclass=s[1];
    }
var v=document.getElementsByTagName(tag);  // tag selector like "tag"
if(selclass=="")
    return(v);
for(i=0;i<v.length;i++){
    if(v[i].className==selclass){
        objlist.push(v[i]);
        }
    }
return(objlist);
}

En de functie wordt opgeroepen in de html code door het volgende:

<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small");
}
</script>

Alvast heel erg bedankt voor de reacties

 

[That Guy]

Een plaatje (met ronde hoeken) en daaroverheen het inputveld, dat je met CSS dezelfde kleur kan geven als het plaatje... mischien een makkelijkere oplossing

 

[Beasty]

hmmm dat ik daar zelf nog niet aan gedacht had, is eigenlijk nog de simpelste manier van allemaal...

heel erg bedankt dus bij deze :thumb: