Html 焦点边框导致背景图像跳转_Html_Css

Html 焦点边框导致背景图像跳转

html css

Html 焦点边框导致背景图像跳转,html,css,Html,Css,当输入具有焦点时，是否仍有停止背景图像跳跃的方法当输入获得焦点时，会向其添加一个2px边框，但这会导致图像跳转添加背景附件：修复了导致图像消失的问题 .搜索框{ 边框：1px实心0065bd；背景色：fff；背景：urlhttp://png-5.findicons.com/files/icons/980/yuuminco/256/search.png; 背景尺寸：20px 20px；背景重复：无重复；背景位置：左；右边填充：20px！重要；填充顶部：2件！重要；填充底部：2p

当输入具有焦点时，是否仍有停止背景图像跳跃的方法

当输入获得焦点时，会向其添加一个2px边框，但这会导致图像跳转

添加背景附件：修复了导致图像消失的问题

首先，定义两个维度的背景位置。我强烈建议以像素为单位。然后，在焦点样式上，将背景位置重置为-1px-1px以补偿新的额外边界像素

.search_box {
  [...]
  background-position: 0 0;
}

.search_box:focus {
  [...]
  background-position: -1px -1px;
}

首先，定义两个维度的背景位置。我强烈建议以像素为单位。然后，在焦点样式上，将背景位置重置为-1px-1px以补偿新的额外边界像素

.search_box {
  [...]
  background-position: 0 0;
}

.search_box:focus {
  [...]
  background-position: -1px -1px;
}

使用

我通常使用此生成器生成我的：

.搜索框{ 边框：1px实心0065bd；背景色：fff；背景：urlhttp://png-5.findicons.com/files/icons/980/yuuminco/256/search.png; 背景尺寸：20px 20px；背景重复：无重复；背景位置：左；右边填充：20px！重要；填充顶部：2件！重要；填充底部：2px！重要；左侧填充：5px！重要；高度：42px；宽度：100%；填充：6px 12px； } .搜索框：焦点{ 背景色：d9effc；盒影：0px 0px 0px 2px RGBA0101189,1； } 可以使用框大小：边框框；打开。搜索_框，使其保持相同大小，即使边框更大，左边距：-1px；打开.搜索框：集中精力使其保持在同一位置

.搜索框{ 边框：1px实心0065bd；背景色：fff；背景：urlhttp://png-5.findicons.com/files/icons/980/yuuminco/256/search.png; 背景尺寸：20px 20px；背景重复：无重复；背景位置：左；右边填充：20px！重要；填充顶部：2件！重要；填充底部：2px！重要；左侧填充：5px！重要；高度：42px；宽度：100%；填充：6px 12px；框大小：边框框； } .搜索框：焦点{ 背景色：d9effc；边框：2个实心0065bd；左边距：-1px； } 可以使用框大小：边框框；打开。搜索_框，使其保持相同大小，即使边框更大，左边距：-1px；打开.搜索框：集中精力使其保持在同一位置

.搜索框{ 边框：1px实心0065bd；背景色：fff；背景：urlhttp://png-5.findicons.com/files/icons/980/yuuminco/256/search.png; 背景尺寸：20px 20px；背景重复：无重复；背景位置：左；右边填充：20px！重要；填充顶部：2件！重要；填充底部：2px！重要；左侧填充：5px！重要；高度：42px；宽度：100%；填充：6px 12px；框大小：边框框； } .搜索框：焦点{ 背景色：d9effc；边框：2个实心0065bd；左边距：-1px； }

这很好，但是框阴影的像素太多了。@JamesDouglas您可以用它制作一个，但是框阴影的像素太多了。@JamesDouglas您可以用它制作一个