input标签美化

最新推荐文章于 2024-07-29 14:52:42 发布
最新推荐文章于 2024-07-29 14:52:42 发布
阅读量4.2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyp19980304/article/details/83270540
版权

预期样子：

美化前：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册页面</title>
    <style>
        *{
           margin: 0;
            padding: 0;
        }
        body{
            background-color: antiquewhite;

        }
        a{
            text-decoration: none;
        }
        .wrap{
            margin-left: 40%;
            margin-top: 10%;
        }
        p{
            margin-bottom: 10px;
        }
        

    </style>
</head>
<body>
    <div class="wrap">
        <form action="http://www.baidu.com" method="post">
            <p>
                <label for="user">用户名</label>
                <input type="text" name="userName" id="user" placeholder="请设置用户名">
            </p>
            <p>
                <lable for="phoneNumber">手机号</lable>
                <input type="text" name="phoneNumber" id="phoneNumber" placeholder="可用于登录和找回密码">
            </p>
            <p>
                <lable for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码</lable>
                <input type="password" name="password" id="password" placeholder="请设置登录密码">
            </p>
            <p>
                <lable for="verificationCode">验证码</lable>
                <input type="text" name="verification" id="verificationCode" placeholder="请输入验证码">
                <input type="button" name="button" value="获取短信验证码">
            </p>
            <p>
                <input type="checkbox" value="">
                阅读并接受
                <a href="#">《百度用户协议》</a>
                及
                <a href="#">《百度隐私权保护声明》</a>
            </p>
            <P>
                <input type="button" value="注册" style="height:30px; width:50px;">
            </P>
        </form>
    </div>
</body>
</html>

美化后：

 

 

拯救小老弟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
记一次简单的input标签美化的尝试
Akatsuki的博客
05-10 555
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .
input标准美化
10-10
为了适应不同设备的屏幕尺寸，`<input>`标签的美化也需要考虑响应式设计。可以使用媒体查询(`@media`)来调整在不同屏幕分辨率下的样式。 四、JavaScript和jQuery插件 JavaScript和jQuery库提供了更高级的交互功能，...
Input 标签的 Type 属性及其含义详解
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-29 1562
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。浏览器会对输入的内容进行基本的验证，确保它符合电子邮件的格式。浏览器会对输入的内容进行基本的验证，确保它符合 URL 的格式。搜索输入类型用于创建一个用于搜索的文本输入框。普通按钮输入类型用于创建一个普通的按钮，通常用于触发 JavaScript 事件。范围输入类型用于创建一个滑块控件，用户可以通过移动滑块来选择一个值。密码输入类型用于创建一个密码输入框，其中输入的字符会被隐藏。
input标签的美化
weixin_30896825的博客
07-05 202
css input checkbox和radio样式美化：http://www.haorooms.com/post/css_mh_ck_radio 自定义 css checkbox 样式 ：http://blog.163.com/yibei_kukafei/blog/static/300210212014923103431813/ 纯CSS设置Checkbox复选框控件的样式：http...
input样式美化
热门推荐
qq_25462315的博客
12-24 1万+
效果图如下： 代码如下： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;
css input[type=file] 样式美化(input上传文件样式 )
09-24
在HTML中，我们可以将这些样式应用到`<a>`标签上，同时将`<input type="file">`嵌套在内，以实现文件上传的功能。这样，用户点击美化过的按钮，就会触发文件选择对话框。 ```html ;" class="a-upload"> <input ...
input_美化、单选框 点击文字可以选中
10-09
在网页设计和开发中，"input_美化"是一个重要的议题，特别是对于提升用户体验而言。"input_美化、单选框 点击文字可以选中"这个主题涉及到的是如何通过CSS和JavaScript来改进HTML中的输入元素（如单选按钮）的外观，...
如何用input标签和jquery实现多图片的上传和回显功能
12-29
本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图   效果图 我们从零来做一个这样的demo 第一步： 我们先完善一下我们的页面，默认的input-file标签非常丑，我们...
css-input的美化
qq_42748585的博客
07-04 893
原装input很丑陋，我们需要人工对其进行装饰才能好看哦！ 首先取消选中时的蓝色外边框：outline-style: none ; 若你想取消外边框：border：0 或 border：none 你想取消右边框可以这样：border-right:none;（如果你border: 1px solid #ccc 这样设置了边框你就无法单独取消右边框）解决方法 border-top:2pxsolidrgb(182,182,182);拆开定义 一般的border设置：border: 1p...
input上传文件美化
12-22
input标签type="file"，上传文件样式美化。 上传完毕显示文件名。
14种CSS3炫酷表单input输入框美化效果
12-20
14种CSS3炫酷表单input输入框美化效果
input标签样式
03-23
html input标签样式
美化file input
08-07
美化file input, http://blog.csdn.net/wuqinfei_cs/article/details/38413317
常用的input样式美化。
Wkq55555的博客
10-06 653
在平常的网站开发中，css，html提供的关于<input type ="checkbox"/>或者<input type = "file"/>的样式不是我们想要的，那么现在我们来介绍一个小技巧，来设置成我们想要的样式。 第一个input框的美化,原理是用一个a标签包裹一个input标签，让input溢出，设置input标签的透明度为0，然后设置a标签就可以设置...
美化 input file 标签
qq_39966186的博客
09-03 152
美化 input file 标签 <input type="text" id="xs" value="" > <label for="pic"> <input onchange="document.getElementById('xs').value=this.value;" type="file" id="pic" name="pic" style="left:-9999px;position:absolute;" > <div>上传照片</div
Input标签的美化，借用lable
weixin_30279315的博客
10-18 214
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0;padding:0;list-style: none; } li{ position: relative; ...
用HTML代码美化一个input
04-20
标签怎么做？能教我吗？ 当然可以！你可以使用 CSS 对 input 标签进行美化，下面是一个例子： HTML 代码： ``` <label for="input">输入框:</label> <input type="text" id="input" name="input"> ``` CSS 代码： ``` input[type=text] { border: 1px solid #ccc; background-color: #f2f2f2; border-radius: 5px; padding: 10px; font-size: 16px; width: 300px; box-shadow: 1px 1px 1px #d0d0d0; } ``` 这样就可以美化 input 标签啦！你可以根据自己的需要进行调整，比如修改颜色、边框等属性。希望能帮到你！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值