Question

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

HTML

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

CSS

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

小提琴

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

https://jsfiddle.net/fpjc9pLy/

Answer 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

Answer 2

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

目前已将其作为CSS4的工作草案进行了阅读。

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

颜色
背景颜色
光标
概要
文字修饰
文本加重色
文字阴影

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

::selection的标准区域取决于浏览器如何呈现它。它不能通过使用CSS进行扩展。

一般情况下，与Firefox相比，Chrome的字体大小不同，因此会突出显示不同的区域。

CSS填充输入文本焦点区域

2 个答案: