效果：

实现：

<!DOCTYPE html>

<html>

<head>

    <title>使用CSS来渲染HTML的表单元素</title>

    <style type="text/css">

        input[type=text], select {

              width: 100%;

              padding: 12px 20px;

              margin: 8px 0;

              display: inline-block;

              border: 1px solid #ccc;

              border-radius: 4px;

              box-sizing: border-box;

        }

        input[type=submit] {

              width: 100%;

              background-color: #4CAF50;

              color: white;

              padding: 14px 20px;

              margin: 8px 0;

              border: none;

              border-radius: 4px;

              cursor: pointer;

        }

        input[type=submit]:hover {

              background-color: #45a049;

        }

        div {

              border-radius: 5px;

              background-color: #f2f2f2;

              padding: 20px;

        }

    </style>

</head>

<body>

<div>

    <!-- 自己还不会写php -->

    <form action="https://www.runoob.com/action_page.php">

        <label for="fname">First Name</label>

        <input type="text" id="fname" name="firstname" placeholder="Your name...">

        <label for="lname">Last Name</label>

        <input type="text" id="lname" name="lastname" placeholder="Your lastname...">

        <label for="country">Country</label>

        <select id="country" name="country">

            <option value="australia">Australia</option>

            <option value="canada">Canada</option>

            <option value="usa">USA</option>

        </select>

        <input type="submit" value="Submit">

    </form>

</div>

</body>

</html>

详细解释及拓展见：https://www.runoob.com/css/css-form.html

使用CSS来渲染HTML的表单元素的更多相关文章

  1. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  2. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  3. json数据渲染表单元素出现的问题

    解析页面表单元素 parseForm: function () { var data = {}; $(this).find('input').each(function () { switch ($( ...

  4. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  5. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  6. 关于谷歌浏览器 表单元素获取焦点后自动增加外边线的问题解决CSS代码

    input,textarea:focus { outline: none;} /*去除表单元素默认边框*/

  7. CSS样式之表格，表单

    布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式 <h1>到<h6> 样式已经写好了,可以直接用,兼容性也 ...

  8. css总结18：HTML 表单和inut各个常用标签

    1 HTML 表单和输入 1.1 HTML 表单介绍 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons ...

  9. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

随机推荐

  1. Codeforces Round #552 (Div. 3) EFG(链表+set,dp,枚举公因数)

    E https://codeforces.com/contest/1154/problem/E 题意 一个大小为n(1e6)的数组\(a[i]\)(n),两个人轮流选数,先找到当前数组中最大的数然后选 ...

  2. Luogu P3646 [APIO2015]巴厘岛的雕塑

    深夜写题解系列,话说这题暑假的时候就在LOJ上做掉了,然后今天看到Luogu上有就去交了一下,发现没写过题解,赶紧来补一下 说句题外话APIO2015的题目好水啊 首先考虑按位取或的过程,很显然要从二 ...

  3. eclipse复制bpmn文件到idea下乱码问题处理

    1.最近在学习工作流,在eclipse上画完了流程图,然后复制到idea下,发现节点的汉字是乱码的. 2.处理方案是修改idea的配置文件,如图,打开这两个文件,在文件末尾加上 -Dfile.enco ...

  4. QMap::remove操作，并不会调用值的析构，跟QTreeWidget同类，需要主动去释放

    void test_MapRemvoe() { DBOperator * painter = new DBOperator; QMap<int , DBOperator*> map; ma ...

  5. 这几款我私藏的Markdown编辑器，今天分享给你

    相信很多人都使用 Markdown 来编写文章,Markdown 语法简洁,使用起来很是方便,而且各大平台几乎都已支持 Markdown 语法 那么,如何选择一款趁手的 Markdown 编辑器,就是 ...

  6. [分布式学习]消息队列之rocketmq笔记

    文档地址 RocketMQ架构 哔哩哔哩上的视频 mq有很多,近期买了<分布式消息中间件实践>这本书,学习关于mq的相关知识.mq大致有有4个功能: 异步处理.比如业务端需要给用户发送邮件 ...

  7. Pencil 基于Electron的GUI原型工具之菜单再探

    为什么要重试呢? 主要是觉得Pencil这个工具还是比较有价值.就像Linus对Linux下分发版的态度"让用户有选择"一样,在现在这个Sass服务.Web服务化越来越普遍越便利的 ...

  8. HTML连载25-通配符选择器&选择器综合练习

    一.通配符选择器 作用:给当前页面上所有的标签设置属性 (2)格式: *{属性:值:} (3)注意点:由于通配符选择器是给界面上所有的标签设置属性,因此在设置之前会遍历所有的标签,如果当前界面上的标签 ...

  9. torch_11_风格迁移和cycleGAN

    1,A Neural Algorithm of atistic Style https://axiv.org/pdf/1508.06576.pdf 如何定义图片的内容,风格: 定义内容:在vggnet ...

  10. linux基础学习路线&review

    linux基础学习网址: https://www.runoob.com/linux/linux-tutorial.html 比较重点的是这个启动过程的介绍学习:https://www.runoob.c ...