效果：

实现：

<!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. Project Euler Problem 675

    ORZ foreverlasting聚聚,QQ上问了他好久才会了这题(所以我们又聊了好久的Gal) 我们先来尝试推导一下\(S\)的性质,我们利用狄利克雷卷积来推: \[2^\omega=I\ast| ...

  2. AGC037C Numbers on a Circle（神奇思路）

    Atcoder 全是神仙题-- 先变成能不能从 \(b\) 到 \(a\).操作变成一个数减掉旁边两个数. 考虑里面最大的且不和 \(a\) 中相等的那个数.它两边的数此时都不能操作,否则就减到非正数 ...

  3. zlib压缩相关

    相关原理 deflate(RFC1951):一种压缩算法,使用LZ77和哈弗曼进行编码: zlib(RFC1950):一种格式,是对deflate进行了简单的封装,他也是一个实现库(delphi中有z ...

  4. app版本升级的测试点

    移动端版本更新升级是一个比较重要的功能点,主要分为强制更新和非强制更新. 1.强制更新需要测试的点有: 1)强制升级是否可以升级成功 从老版本的包升级到新版版的包是否可以升级成功. 2)升级后的数据是 ...

  5. DDR基础知识

    1.前言 DDR的全称为Double Data Rate SDRAM,也就是双倍速率的SDRAM,SDRAM在一个CLK周期传输一次数据,而DDR在一个CLK周期传输两次数据,分别在上升沿和下降沿各传 ...

  6. Docker(Linux)学习笔记以及Redis/MariaDB的容器使用后台全自动启动

    1:Docker安装,由于Docker后续pull镜像的服务器默认是在国外的,速度实在是太慢,这里使用阿里云的镜像 阿里云的Docker CE 镜像源站进行安装 docker ===========U ...

  7. 基于Spring Cloud Netflix的TCC柔性事务和EDA事件驱动示例

    Solar Spring Cloud为开发者提供了快速构建分布式系统中的一些常见工具,如分布式配置中心,服务发现与注册中心,智能路由,服务熔断及降级,消息总线,分布式追踪的解决方案等. 本次实战以模拟 ...

  8. oracle 创建表、删除表、添加字段、删除字段、表备注、字段备注、修改表属性

    1.创建表 create table 表名( classid number() primary key, 表字段 数据类型 是否允许为空(not null:不为空/null:允许空) 默认值(defa ...

  9. 安装配置ZooKeeper及基本用法

    要想学习分布式应用,ZooKeeper是一个绕不过去的基础系统.它为大型分布式计算提供开源的分布式配置服务.同步服务和命名注册. 今天先介绍系统的安装和基本使用,后续会推一些基本的Java使用代码. ...

  10. JavaScript RegExp(正则表达式) 对象

    正则表达式是描述字符模式的对象.正则表达式用于在文本上执行模式匹配和“搜索和替换”功能. var patt = /JC2182/i 示例说明: /JC2182/i - 是一个正则表达式. JC2182 ...