CSS 填充到输入文本焦点区域

Question

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

HTML

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

CSS

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

Fiddle

Select 看焦点背景的文字。是否可以在此背景上填充？

https://jsfiddle.net/fpjc9pLy/

Answer 1

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

它目前被重新添加为 CSS4 的工作草案。

目前可以使用（对于前缀为-moz的Firefox），但仅适用于以下规则：

颜色
background-color
光标
大纲
text-decoration
text-emphasis-color
text-shadow

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

::selection的标准区域取决于浏览器的渲染方式。无法使用 CSS.

展开

通常 Chrome 与 Firefox 相比字体大小不同，因此突出显示不同的区域。

Answer 2

当您 select 文本时，只有文本会以蓝色突出显示，输入字段不会。因此，您的建议是不可能向突出显示的文本添加填充。

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

$('#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

CSS 填充到输入文本焦点区域

CSS padding to input text focus area

css

focus

input

padding