CSS中Input元素边框不显示的原因排查求助

你给input添加边框却看不到，核心原因是CSS里的opacity: 0——这个属性会让整个input（包括边框）完全透明，自然看不到边框。另外还有个隐藏问题：input用了绝对定位，但父元素.search没设position: relative，会导致input的定位参考不是你预期的.search容器，位置可能出现错乱。

修复方案 #

调整后的CSS代码

/* 给父容器添加相对定位，让input的绝对定位以它为参考 */
.word .search {
  position: relative;
}

.word .search input{
   position: absolute;
   height: 42px;
   width: calc(100% - 50px);
   font-size: 16px;
   padding: 0 13px;
   border: 1px solid #e6e6e6;
   outline: none;
   border-radius: 5px 0 0 5px;
   /* 将opacity改为1，让元素可见 */
   opacity: 1;
   pointer-events: auto;
   transition: all 0.2s ease;
}

额外提示 #

如果你的需求是默认隐藏input，需要交互后再显示，别用opacity: 0+pointer-events: none的方式，推荐两种更合理的实现：

• 用visibility: hidden（隐藏但保留占位）或display: none（隐藏不占位），配合JS切换状态；
• 用transform: translateX(-100%)把input移出可视区域，显示时改回transform: translateX(0)，过渡效果更自然，也不会出现透明导致的边框消失问题。

内容的提问来源于stack exchange，提问作者user19154568