#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Forum » For webmasters » HTML / CSS / Javascript » CSS: Nice input fields
CSS: Nice input fields
adminDate: Tuesday, 28.06.2011, 14:11 | Message # 1
Group: Verified
Posts: 187
Awards: 8
Status: Offline

HTML:

Code
<form action=""><input type="text"></input><form>

CSS:

Code
input:focus{
      outline:none;
      border-color:rgba(255,25,33,.75);
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      box-shadow:0 0 8px rgba(255,25,33,.5);
      -moz-box-shadow:0 0 8px rgba(255,25,33,.5);
      -webkit-box-shadow:0 0 8px rgba(255,25,33,.5);
}
input{
      border:1px solid #aaa;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      transition:border linear .2s,box-shadow linear .2s;
      -moz-transition:border linear .2s,-moz-box-shadow linear .2s;
      -webkit-transition:border linear .2s,-webkit-box-shadow linear .2s;
}
 
Filip5Date: Friday, 06.01.2012, 22:51 | Message # 2
Group: Verified
Posts: 117
Awards: 4
Status: Offline
Ok,so I tried that,and all i get is this: www.csaliancia.ucoz.com
 
adminDate: Monday, 09.01.2012, 15:24 | Message # 3
Group: Verified
Posts: 187
Awards: 8
Status: Offline
Filip5, what is it? wacko
 
Filip5Date: Monday, 09.01.2012, 16:52 | Message # 4
Group: Verified
Posts: 117
Awards: 4
Status: Offline
I copied the css code into my design...
 
adminDate: Monday, 09.01.2012, 16:57 | Message # 5
Group: Verified
Posts: 187
Awards: 8
Status: Offline
Filip5, this is not correctly
 
ZangmanDate: Monday, 09.01.2012, 19:40 | Message # 6
Group: Users
Posts: 7
Awards: 0
Status: Offline
Filip5,

I believe you put that code in your login form.

You have 2 pieces
CSS:
Code


input:focus{  
       outline:none;  
       border-color:rgba(255,25,33,.75);  
       border-radius:3px;  
       -moz-border-radius:3px;  
       -webkit-border-radius:3px;  
       box-shadow:0 0 8px rgba(255,25,33,.5);  
       -moz-box-shadow:0 0 8px rgba(255,25,33,.5);  
       -webkit-box-shadow:0 0 8px rgba(255,25,33,.5);  
}  
input{  
       border:1px solid #aaa;  
       border-radius:3px;  
       -moz-border-radius:3px;  
       -webkit-border-radius:3px;  
       transition:border linear .2s,box-shadow linear .2s;  
       -moz-transition:border linear .2s,-moz-box-shadow linear .2s;  
       -webkit-transition:border linear .2s,-webkit-box-shadow linear .2s;  
}

and

HTML
Code


<?if($PAGE_ID$="login")?><div style="width:180px;"><?endif?>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<?if($ERROR$)?><td colspan="2" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<tr><td width="20%" nowrap="nowrap">E-mail:$UID_ICON$</td><td><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/></td></tr>
<tr><td>Password:</td><td><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/></td></tr>
</table>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr><td nowrap><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">remember</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?><br /><input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">hidden</label><?endif?></td><td align="right" valign="top"><input class="loginButton" name="sbm" type="submit" value="Login"/></td></tr>
<tr><td colspan="2"><div style="font-size:7pt;text-align:center;"><a href="$REMINDER_LINK$">Lost password</a> | <a href="$REGISTER_LINK$">Registration</a></div></td></tr>
</table>
<?if($PAGE_ID$="login")?></div><?endif?>


Copy The CSS and paste into Style Sheet (CSS)

Copy The HTML and paste into User Login Form

you can access this by using the admin panel by clicking Design>Design Management (Templates)

That should do it!
 
Filip5Date: Tuesday, 10.01.2012, 00:20 | Message # 7
Group: Verified
Posts: 117
Awards: 4
Status: Offline
I managed t oget it working,but only one of those codes...But I am glad that its back to normal now smile
 
Forum » For webmasters » HTML / CSS / Javascript » CSS: Nice input fields
  • Page 1 of 1
  • 1
Search: