文章/答案/技术大牛

发布

社区首页 >问答首页 >文本框大小缩小/缩小焦点

问文本框大小缩小/缩小焦点
EN

Stack Overflow用户

提问于 2016-06-29 19:44:51

回答 3查看 1.4K关注 0票数 2

在focus上，textbox的大小似乎缩小了。但是，如果border-width设置为2px，则无法观察到这种减少。我想将border-width设置为1px，但没有这样的缩减效果。怎么做呢？

#name:focus{
	outline:none;
	border:1px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

#name2:focus{
	outline:none;
	border:2px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

html

css

回答 3

Stack Overflow用户

发布于 2016-06-29 20:00:20

这里有多种方法。例如，您可以将默认边框宽度设置为1px(#name2)或增加焦点上的填充(#name)。

#name2 {
    border:1px solid rgba(81, 203, 238, 1);
}
#name2:focus,
#name:focus{
    outline:none;
    border:1px solid rgba(81, 203, 238, 1);
    box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
#name:focus{
    padding: 2px;
}

<!doctype  html>
<html>
<head>
</head>
<body>
  Padding changes to 2px on focus<br>
  Padding <input type="text" id='name'><br>
  Border default is set to 1px<br>

  Border <input type="text" id='name2'><br>
  Check <input type="text" id='check'>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2016-06-29 19:54:23

尝尝这个

#name:focus{
	outline:none;
	border-color:rgba(81, 203, 238, 1);
        border-style: ridge;
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

#name2:focus{
	outline:none;
	border-color:rgba(81, 203, 238, 1);
        border-style: ridge;
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

票数 0

Stack Overflow用户

发布于 2016-06-30 13:03:06

这样的问题可以通过在boxes上引入padding来解决，其中需要增加对focus的影响。

我在默认设置上添加了padding:2px。也可以在focus上添加Padding:2px，但只需在默认设置上添加即可解决您的问题。看一看snippet。

#name:focus{
	outline:none;
	border:1px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
    padding: 2px;
}

#name2:focus{
	outline:none;
	border:2px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38098589

复制

相似问题

问文本框大小缩小/缩小焦点
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本框大小缩小/缩小焦点EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本框大小缩小/缩小焦点
EN