利用CSS改变输入框的光标颜色

转：http://www.cnblogs.com/gymmer/p/6810367.html

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         input,
 8         textarea {
 9             color: #0f0;
10             text-shadow: 0px 0px 0px #000;
11             -webkit-text-fill-color: transparent;
12         }
13
14         input::-webkit-input-placeholder,
15         textarea::-webkit-input-placeholder{
16             text-shadow: none;
17             -webkit-text-fill-color: initial;
18         }
19     </style>
20 </head>
21 <body>
22     <input type="text" placeholder="test">
23     <p></p>
24     <textarea name="" cols="30" rows="10"></textarea>
25 </body>
26 </html>

时间： 2024-10-07 22:41:09

利用CSS改变输入框的光标颜色的相关文章

CSS改变字体下划线颜色

下图是网页中一个很普通的列表. 这次去见客户的时候,客户觉得下划线的颜色可以变变,网页就变得不单调了(据后来了解,客户上学时出板报,所以对网站的布局和细节非常的重视).做网站那么久,第一次要换下划线颜色,客户就是上帝,提出这个需求,立马查阅相关资料,发现下划线颜色是随着字体的颜色改变的,不能单独改变. 额,那怎么办? 办法总比困难多,通过使用css border-bottom实现改变文字字体下划线颜色即可. CSS代码:style="border-bottom: 1px solid blue;t

css修改输入框的placeholder颜色

::-webkit-input-placeholder { /* WebKit browsers */ color: #999;} :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999;} ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999;} :-ms-input-placeholder { /

iOS 改变UITextField中光标颜色

http://blog.csdn.net/rubycrow/article/details/22411805 方法1: [objc] view plaincopyprint? [[UITextField appearance] setTintColor:[UIColor blackColor]]; 这种方法将影响所有TextField. 方法2: [objc] view plaincopyprint? textField.tintColor = [UIColor redColor]; 如果在In

CSS改变插入光标颜色caret-color简介及其它变色方法（转）

一.CSS改变输入框光标颜色的原生属性caret-color CSS caret-color属性可以改变输入框插入光标的颜色,同时又不改变输入框里面的内容的颜色. 例如: input { color: #333; caret-color: red; } 结果光标颜色变成红色,文字还是深黑色: 眼见为实,您可以狠狠的点击这里:CSS caret-color改变光标颜色demo //zxx: 单词caret表示"插入符号",指处于内容可插入状态的光标. caret-color属性不仅对于原

解决android手机EditText设置光标颜色，android:textCursorDrawable="@drawable/corner_cursor" 华为手机无效果的问题

<EditText android:id="@+id/alertdialog_zhuan_zeng_friend_phone_Edt" android:layout_width="match_parent" android:layout_height="40dp" android:textCursorDrawable="@drawable/corner_cursor" android:singleLine="t

css布局-改变输入框光标颜色caret-color: blue;

改变输入框光标颜色效果: label { display: block; padding-bottom: 5px; font-weight: bold; font-size: 16px; } input { display: block; padding: 0 20px; outline: none; border: 1px solid #ccc; width: 100%; height: 40px; caret-color: blue; transition: all 300ms; } <di

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式首先用div分区块,了解网页布局,脑子里面有个大概的页面布局目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容

用css改变默认的checkbox样式

自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果缺点:你首先得有一张好看的图片优点:浏览器兼容性好 <!doctype html> <html> <head> <meta charset="utf-8"> <title>chec</title> <style> #wrapper {margin: 20px auto;} #wrapper .i

CSS实现输入框的高亮效果-------Day50

又到周末了,这一天天过的真快,明天应该回老家了,不知道会不会有机会进行编写,尽量争取吧,实在不想就这样间断.如果说从前会一天天无聊到爆,那现在自己应该是一天天忙的要死,欠缺了太多东西,那些浪费的时间可不是懊恼就能解决的,出来混,终归是要还的啊. 先来幅图画,显示下什么是所谓的高亮效果在输入框周围出现了亮光,或者说阴影造成边框发亮的假象,这就是我所说的高亮效果,那究竟该如何是实现呢? 这样我们先来上一下代码,我是用的枫树浏览器,是webkit内核,所以这里只写了webkit .aa:HOVER{