css 清除表单样式,css form表单样式清除

开发项目中表单常用的清楚样式：

1、改变placeholder默认字体颜色

::-webkit-input-placeholder{color: #333;}

:-moz-placeholder{color: #333;}

:-moz-placeholder{color: #333;}

:-ms-input-placeholder{color: #333;}

2、取消input number的上下箭头

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}

input[type="number"]{-moz-appearance:textfield;}

3、select下拉选择框option文字右对齐

direction: rtl;

4、select右边箭头隐藏

-webkit-appearance: none;

5、清除textarea右下角可拖拽功能

resize:none;

6、textarea文本框高度自适应

.ta_box{

width: 400px;

height: auto;

overflow: hidden;

border: 1px solid #999;

box-sizing: border-box;

}

.ta{

min-height: 30px;

outline: none;

resize: none;

width: 500px;

box-sizing: border-box;

vertical-align: top;

border: none;

}

$.fn.autoHeight = function () {

function autoHeight (elem) {

elem.style.height = 'auto';

elem.scrollTop = 0; //防抖动

elem.style.height = elem.scrollHeight + 'px';

}

this.each(function () {

autoHeight(this);

$(this).on('keyup',function () {

autoHeight(this);

});

});

}

$('textarea').autoHeight();

这里的代码需要引用JQ,而结构之中最外层的.ta_box是为了消除滑块,优化用户体验.

这里用到了JQ的扩展函数

还不错的Table样式和form表单样式

作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式

element-ui的form表单样式改动

造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...

yii2的form表单样式怎么灵活控制呢？

<?php $form = ActiveForm::begin(['id' => 'login-form', 'fieldConfig'=>[ 'template'=> &qu ...

form表单样式

...

bootstrap简单form表单样式-form-horizontal

jsp代码:

form 表单 和 jQuery HTML &sol; CSS 方法(&dollar;&lpar;&rpar;&period;html 类似的样式)

1 有关链接 :http://www.runoob.com/tags/tag-form.html https://www.cnblogs.com/Jxwz/p/4509618.html https:/ ...

(day43)form表单、css

目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...

1113 form表单与css选择器

目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...

前端form表单与css

form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...

随机推荐

Minor【 PHP框架】5&period;事件

框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

【leetcode】Spiral Matrix

题目概要: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spi ...

POJ 1564 经典dfs

1.POJ 1564 Sum It Up 2.总结: 题意:在n个数里输出所有相加为t的情况. #include #include #in ...

RESTful使用

测试工具: JMeter 可以使用JMeter对HTTP REST接口进行测试 Java RESTful框架: Jersey

Mysql数据库搭建-Windows

首先先下载一下文件包. 下面这个文件包里面包含了已配置的MySQL5.5和连接器. https://www.dropbox.com/s/iu4ifv0m2232ktn/Win_Mysql5_ODBC. ...

对C&plus;&plus;默认构造函数的理解

在文章开始之前,首先指出对于c++新手的两个常见的误解: 一.任何class如果没有定义default constructor,就会被合成出一个来. 二.编译器合成出来的default constru ...

HTML5 设备上的API

一.Vibration API ,接受两种类型参数 vibrate (unsigned long time)   当参数是unsigned long的时候 此时参数表示震动时间.  NotSuppor ...

关于 &quot&semi;java中常量定义在interface中好还是定义在class中好&quot&semi; 的一些思考

原文链接 http://blog.csdn.net/voo00oov/article/details/50433672 java中interface中定义变量都是"public static ...

PHP到底有多牛？你所知道的网站都在用它

PHP到底有多牛?你所知道的网站都在用它 提起PHP,很多人的第一印象就是网站开发,确实,在网站开发方面,PHP难逢对手,当之无愧是“世界上最好的语言”. 有数据显示,目前全球5000万互联网网站中, ...

&lbrack;转&rsqb;MVC实用架构设计(三)——EF-Code First(3)：使用T4模板生成相似代码

本文转自:http://www.cnblogs.com/guomingfeng/p/mvc-ef-t4.html 〇.目录 一.前言 二.工具准备 三.T4代码生成预热 (一) 单文件生成:Hello ...