好看的表单样式

<style>
body {
     scrollbar-face-color: #ededf3;
     scrollbar-highlight-color: #ffffff;
     scrollbar-shadow-color: #93949f;
     scrollbar-3dlight-color: #ededf3;
     scrollbar-arrow-color: #082468;
     scrollbar-track-color: #f7f7f9;
     scrollbar-darkshadow-color: #ededf3;
     font-size: 9pt;
     color: #003366;
     overflow:auto;
}
select{
     border-right: #000000 1px solid;
     border-top: #ffffff 1px solid;
     font-size: 12px;
     border-left: #ffffff 1px solid;
     color:#003366;
     border-bottom: #000000 1px solid;
     background-color: #f4f4f4;
}
.editbox{
     background: #ffffff;
     border: 1px solid #b7b7b7;
     color: #003366;
     cursor: text;
     font-family: "arial";
     font-size: 9pt;
     height: 18px;
     padding: 1px;
}
.multieditbox{
     background: #f8f8f8;
     border-bottom: #b7b7b7 1px solid;
     border-left: #b7b7b7 1px solid;
     border-right: #b7b7b7 1px solid;
     border-top: #b7b7b7 1px solid;
     color: #000000;
     cursor: text;
     font-family: "arial";
     font-size: 9pt;
     padding: 1px;
}
</style>

<asp:TextBox ID="TextBox1" runat="server" CssClass="editbox"></asp:TextBox><br/>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="multieditbox" TextMode="MultiLine"></asp:TextBox><br/>
        <select id="Select1">
            <option>房贷首付三点</option>
            <option>房贷首付三富士达点</option>
        </select><br/>
    1、只有下划线的文本框:<br/>
<input style="border:0;border-bottom:1 solid black;background:;"><br/>

2、软件序列号式的输入框:<br/>
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3"><br/>

3、软件序列号式的输入框(完整版):<br/>
<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit"><br/>

4、输入框景背景透明:<br/>
<input style="background:transparent;border:1px solid #ffffff"><br/>

5、鼠标划过输入框,输入框背景色变色:<br/>
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black"><br/>

9、自动向下廷伸的文本框:<br/>
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea><br/>

 

以下是一个简单但漂亮的 from 表单样式,你可以根据自己的需求进行修改: ```html <form> <div class="form-group"> <label for="name">姓名:</label> <input type="text" class="form-control" id="name" placeholder="请输入您的姓名"> </div> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱"> </div> <div class="form-group"> <label for="message">留言:</label> <textarea class="form-control" id="message" rows="3" placeholder="请输入您的留言"></textarea> </div> <button type="submit" class="btn btn-primary">提交</button> </form> ``` CSS 样式: ```css .form-group { margin-bottom: 1rem; } .form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-primary:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; } ``` 这个样式中, form 表单中的输入框和按钮都采用了 Bootstrap 的样式,同时增加了一些自定义的样式,使得整个表单更加美观和易于操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值