求教一个关于定制textbox控件问题

Question

请教各位大侠http://www.scrapblog.com/login/login.aspx以上这一个网页的输入框要怎么做.是要定制控件嘛?

Answer 1

<ContentTemplate>
                    <h3>
                        会员登录</h3>
                    <ul>
                        <li>
                            <div style="width: 60px; float: left; margin: 2px 0px;">
                                登录名：</div>
                            <div style="width: 155px; float: left;">
                                <asp:TextBox ID="txtId" runat="server" MaxLength="16" Width="150px"></asp:TextBox>
                            </div>
                            <div style="color: Red; display: none; float: left; margin: 0px 0px 0px 5px; line-height: 20px;"
                                id="spanIdError">
                                *请输入登录名！
                            </div>
                        </li>
                        <li>
                            <div style="width: 60px; float: left; margin: 2px 0px">
                                密码：</div>
                            <div style="width: 155px; float: left;">
                                <asp:TextBox ID="txtPwd" runat="server" Width="150px" MaxLength="20" TextMode="Password"></asp:TextBox>
                            </div>
                            <div style="color: Red; display: none; float: left; margin: 0px 0px 0px 5px; line-height: 20px;"
                                id="spanPwdError">
                                *请输入密码！
                            </div>
                        </li>
                        <li>
                            <div style="width: 60px; float: left; margin: 2px 0px">
                                验证码：</div>
                            <div style="width: 90px; float: left;">
                                <asp:TextBox ID="txtCode" Width="85px" MaxLength="5" runat="server"></asp:TextBox>
                            </div>
                            <div style="color: Red; display: none; float: left; margin: 0px 0px 0px 5px; line-height: 20px;"
                                id="spanCodeError">
                                *请输入验证码！
                            </div>
                        </li>
                        <li style="height: 50px;">
                            <div style="width: 60px; float: left;">
                                &nbsp;
                            </div>
                            <div style="width: 120px; float: left;">
                                <img id="Img2" src="../Code.aspx" runat="server" alt="验证码" style="border-style: none;
                                    width: 90px; height: 50px;" /></div>
                        </li>
                        <li>
                            <div style="width: 60px; float: left; margin: 2px 0px">
                                &nbsp;
                            </div>
                            <div style="width: 170px; float: left;">
                                <a href="#" onclick="javascript:location.reload();">重新获取验证码</a></div>
                        </li>
                        <li>
                            <div style="width: 60px; float: left; margin: 2px 0px">
                                &nbsp;
                            </div>
                            <div style="float: left; margin: 0px 0px; width: 170px;">
                                <asp:Button ID="btnLogin" runat="server" Width="70px" Text="确定" OnClick="btnLogin_Click"
                                    OnClientClick="return CheckLogInput();" />
                                <asp:Button ID="btnReset" runat="server" Width="70px" Text="重填" OnClientClick="return ClearInput();" />
                                <%--     <input type="button" style="width: 70px;" id="btnlogin" value="确定" />
                                    <input type="button" value="重填" style="width: 70px;" id="btnreset" />--%>
                            </div>
                            <div style="clear: both;">
                            </div>
                        </li>
                        <li>
                            <div style="width: 60px; float: left;">
                            </div>
                            <div style="display: none; color: Red; margin: 0px 0px 0px 60px;" id="divError" runat="server">
                            </div>
                            <UserControl:DivProgress runat="server" ID="progress" />
                        </li>
                    </ul>

Answer 2

楼上,谢谢你的代码.我是想说.我发的网址中的textbox不是控件中那普通的textbox.
是想说如何做像我发的网页中那种

Answer 3

看看页面文件，应该是CSS样式设置

Answer 4

这是这个网站的html代码<div id="horizon">
<div id="container">
<div id="login-panel">
<div class="form">
<fieldset>
<h1>Forgot your password?</h1>
<p>We're happy to see you return! Please log in to continue.</p>
    
 <div id="errors" style="color:White;display:none;">
 
</div>
                         

<label id="login_email">
<strong>Email</strong>

                            <input name="txtLoginEmail" type="text" id="txtLoginEmail" />
                            
                            

                            <span id="valrEmail" style="color:Red;display:none;"></span></label><label id="login_password"><strong>Password</strong>

<input name="txtPassword" type="password" id="txtPassword" />

<input src="../images/btn_log-in-alt.gif" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(''); " name="login_submit" type="image" id="login_submit" tabindex="3" alt="Log-in" />
                                <span id="valrPassword" style="color:Red;display:none;"></span></label><label id="login_remember"><input name="chbRememberMe" type="checkbox" id="chbRememberMe" />
Remember me on this computer
</label>

</fieldset>
</div>
</div>
</div>
</div>
下面这个链接是这个网站的css:http://www.scrapblog.com/stylesheets/login.css
你把html代码粘贴到你网站中，然后下载css放到style目录，就可以做出这个效果。

Answer 5

使用div+css设计，TextBox的外观其实是一张如：http://www.scrapblog.com/login/login.aspx
中的白色圆角背景图片。
<div class="div1">
   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>然后设计div的css样式,为div添加白色圆角背景图片即可

Answer 6

但是如果采用您的那个方法...textbox是有内阴影的.请问可以解决嘛?

Answer 7

引用 5 楼 lxh060204 的回复:
使用div+css设计，TextBox的外观其实是一张如：http://www.scrapblog.com/login/login.aspx
中的白色圆角背景图片。
<div class="div1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>然后设计div的css样式,为div添加白……但是如果采用您的那个方法...textbox是有内阴影的.请问可以解决嘛? 

Answer 8

CSS的设置 ··把整个网站 copy 来 慢慢研究··

Answer 9

 我一般都是，用圆角的图片做背景，然后把textbox设置成透明