删除文字输入的内部阴影 [英] remove inner shadow of text input

问题描述

所以我有一个文本输入，即时通讯使用html5，在铬上，我想改变文本输入的外观，我已经移除了焦点上的轮廓（铬上的橙色），我将背景设置为光颜色＃f1f1f1 ，但现在在顶部和左侧有一个更厚的边框，就像它看起来被推入一样，当背景颜色没有变化时，不会发生。我如何删除它？抱歉，我无法在移动设备上提供图片。

它发生在chrome上，也就是说，Firefox不能测试其他任何人。 $ c>插入样式。这是你问的。

border：none 会一起移除边框。

border-width：1px 会在背景更改之前设置它。

border：1px solid #cccccc 更具体，适用于所有三种颜色，宽度，样式和颜色。

示例： https://jsbin.com/quleh/2/edit?html,output

So I have a text input, im using html5, on chrome, and I want to change the look of a text input, I've removed the outline on focus (orange on chrome), I set the background to a light color #f1f1f1 but now there is like a thicker border on the top and left sides, like it's meant to look pushed in, when there is no change in background color this doesn't happen. How do I remove it? Sorry I can't provide a picture, on a mobile device.

It happens on chrome, ie, and Firefox, can't test any others.

解决方案

border-style:solid; will override the inset style. Which is what you asked.

border:none will remove the border all together.

border-width:1px will set it up to be kind of like before the background change.

border:1px solid #cccccc is more specific and applies all three, width, style and color.

Example: https://jsbin.com/quleh/2/edit?html,output

这篇关于删除文字输入的内部阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！