《让 Firefox 的网页输入框也高亮发光》的评论

chrome高亮输入框颜色调整 | Seateng Blog

chrome高亮输入框颜色调整 | Seateng Blog — Thu, 23 Jun 2011 03:20:07 +0000

[...] http://www.douban.com/group/topic/13291053/ http://fis.io/firefox-input-area-highlighting.html 标签: 暂无相关日志 mockups 注册码目前还没有任何评论. Cancel [...]

杜撰人生 » 让 Firefox 的网页输入框也高亮发光

杜撰人生 » 让 Firefox 的网页输入框也高亮发光 — Sat, 27 Nov 2010 15:26:28 +0000

[...] http://fis.io/firefox-input-area-highlighting.html [...]

fisio

fisio — Tue, 01 Jun 2010 15:57:28 +0000

-moz-outline 已经失效了吧，直接用我现在的css代码，-moz-box-shadow, 用 firebug 查看

Memory

Memory — Tue, 01 Jun 2010 15:17:13 +0000

按你说的改了userContent.css
但是没效果啊
怎么回事？

fisio

fisio — Thu, 11 Mar 2010 09:15:34 +0000

这个属性被 moz 转正了。。。

fly2never

fly2never — Thu, 11 Mar 2010 07:42:42 +0000

我发现了,把moz去掉就好了

fly2never

fly2never — Thu, 11 Mar 2010 07:27:39 +0000

fx 3.6下面失效了

qmdvd

qmdvd — Sun, 07 Mar 2010 12:42:14 +0000

效果很炫很漂亮啊，可惜IE下无效，不知道有没有兼容方法

jhangyu

jhangyu — Wed, 03 Feb 2010 15:07:16 +0000

感谢老肥的回复~
可是不知道为何，即使我用了干净的Firefox，
Google首页的box-shadow的效果还是出不来，
算了~随它吧！
我现在把input.lst设定为outline发光，算是一个折衷的方法吧~~

fisio

fisio — Sun, 31 Jan 2010 15:59:42 +0000

除了颜色之外，浏览器只认前三个长度值，把他们分别作为 offset-x, offset-y, blur-radius, 所以如果出现第四个长度值，是被忽略的。当然最少可以只有两个，只有两个的时候 blur-radius 缺省为零，颜色也可以不写。

另外，不是很建议用 input:focus, 因为很多元素都是 input, 比如下拉菜单，按钮，勾选框，等等。在google首页，输入框是有个 class=lst 的，可以写 input.lst:focus。或者专门指定 type=input 和 textarea, 写作 input[type="text"], textarea {...}

我在 firefox 上试过了 input.lst:focus { border-style: solid; -moz-box-shadow: 0 0 5px #000; } 是有效的，所以我也不知道你的问题出在哪里了。。。

jhangyu

jhangyu — Sun, 31 Jan 2010 13:07:42 +0000

喔~那個2px好像是指spread,陰影擴散範圍，
另外-moz-outline-radius去看MDC的結果好像還有效，我是發現outline-radius無效才去看的
目前最大的問題是-moz-box-shadow還是無法放在Google首頁上，有點麻煩，有請老肥幫幫忙了~~

fisio

fisio — Sat, 30 Jan 2010 18:17:21 +0000

focus 就是光标选中以后的样式，如果要圆角，还是不要加 focus 的好。

另外，-moz-box-shadow 好像写错了，多了一个 2px, 除了颜色之外应该只有三个像素值，分别代表 offset-x, offset-y, blur-radius. 可以参照一下我最新的一篇文章。

还有，好像 -moz-outline, -moz-outline-radius 都在 3.6中失效了，必须要去掉 -moz 了？

jhangyu

jhangyu — Sat, 30 Jan 2010 09:34:34 +0000

请问是怎么指定呢？是这样吗：
input:focus{
border-style: solid ;
-moz-box-shadow: 0 0 3px 2px rgba(235,196,118,0.7) ;
-moz-outline-radius: 5px ;
}
不过这样做好像也没有效果......

fisio

fisio — Fri, 29 Jan 2010 15:24:10 +0000

繁体没关系啦~

我刚测试了一下，的确 google 首页的搜索框无法应用样式，-moz-border-radius 和 -moz-box-shadow 都不可以，要应用必须先指定 border-style. 加上 border-style: solid 或者 border: 1px solid #aaa 试试看呢？

jhangyu

jhangyu — Fri, 29 Jan 2010 14:30:08 +0000

糟...我忘了转简体了~老肥抱歉~~

jhangyu

jhangyu — Fri, 29 Jan 2010 14:28:12 +0000

喔喔~多重陰影~不錯~
不過套在stylish的結果，
Google首頁的搜尋框就是無法顯示，
但是用outline就可以，
有辦法讓input先套-moz-box-shadow，
不能的話再套outline嗎？

fisio

fisio — Fri, 29 Jan 2010 11:36:03 +0000

这个主意不错我试了一下，现在 win firefox 效果如何了？

input:focus, textarea:focus { -moz-box-shadow: 0 0 6px #07e, 0 0 5px #07e, 0 0 4px #07e; }

jhangyu

jhangyu — Fri, 29 Jan 2010 10:05:46 +0000

请问一下老肥：为什么有些iput框无法套用"-moz-box-shadow"呢？(shadow发光的效果比较接近Safari)

jhangyu

jhangyu — Wed, 27 Jan 2010 01:27:03 +0000

倒是Firebug也成圓角了~~

jhangyu

jhangyu — Wed, 27 Jan 2010 01:23:52 +0000

這下只能用"outline"，應該會影響到webkit，該怎麼辦哩？
另外我說的是Google首頁的搜尋框
用了：「input,textaera {
-moz-border-radius: 3px !important;
}」
沒啥效果呢~