输入文本焦点区域的 CSS 填充答案

【问题标题】：CSS padding to input text focus area输入文本焦点区域的 CSS 填充
【发布时间】：2016-04-12 20:29:55
【问题描述】：

我有一个输入文本。当焦点/选定文本时，它会为其添加蓝色背景。它没有输入字段那么高。是否可以在焦点区域进行填充？

HTML

<input type="text" value="My text">

CSS

input {
  padding: 10px;
  height: 30px;
  line-height: 30px;
}

小提琴

选择文本以查看焦点背景。是否可以在此背景上进行填充？

https://jsfiddle.net/fpjc9pLy/

【问题讨论】：

只有焦点在 Chrome 中的边框不同，您使用的是什么浏览器？
Google Chrome，但我希望它也能与 Firefox 和 Edge 一起使用。
我不太明白你想要什么
只需在您的 css 中再添加一个 css 属性 outline: 0; - JS Fiddle

标签： css input focus padding

【解决方案1】：

当您选择文本时，只有文本会以蓝色突出显示，而不是输入字段。所以你的建议，即为突出显示的文本添加填充是不可能的。

一种解决方法是在焦点上更改输入字段背景和字体颜色。将其恢复为正常焦点。

$('#txt').focus(function() {
    $('#txt').css('background-color','#0A78FF');
    $('#txt').css('color','#fff');
  });

  $('#txt').focusout(function() {
    $('#txt').css('background-color','white');
    $('#txt').css('color','#000');
  })

试试这个：http://plnkr.co/edit/6UHBdkfNnHDmKf56fzrn?p=preview

【讨论】：

...input:focus{background-color:#0A78FF;color:#fff;}jsfiddle.net/ryneb6bc
哎呀我怎么能跳过这个..更好的方法来做到这一点。感谢@CodeiSir 指出。

【解决方案2】：

这个区域是::selection伪元素，在不同的浏览器和操作系统上的处理方式不同。它一直是 CSS3 中的工作草案，但在成为推荐状态之前已被删除。

它目前被解读为 CSS4 的工作草案。

目前可以使用（对于带有-moz前缀的Firefox）但它只适用于以下规则：

颜色
背景色
光标
大纲
文字装饰
文本强调颜色
文本阴影

更多信息：::selection - CSS | MDN

::selection 的标准区域取决于浏览器如何呈现它。无法使用 CSS 扩展。

一般而言，Chrome 与 Firefox 相比具有不同的字体大小，因此会突出显示不同的区域。

【讨论】：