如何实现input输入框的透明边框？现有代码调试失败求解决方案

核心修改点 #

• 移除input左右边框，仅保留上下边框，避免和左右两侧的图标、搜索按钮衔接出现多余边界
• 调整边框透明度到匹配视觉需求的程度，可通过调整rgba的alpha值在0.05~0.1区间，实现更浅的透明边框效果
• 统一三个相邻元素的垂直对齐方式，避免出现错位问题

完整修改后的CSS代码 #

.location{
    margin-left:40px;
    margin-top: 10px;
}

.location .fas{
    padding:15px 15px 10px 15px;
    background-color:#F2F2F2;
    height:20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    vertical-align: middle;
}

.location input[type=text]{
    padding:16px 11px 12px 11px;
    /* 仅保留上下半透明边框，左右边框设为0 */
    border-top:  1px solid rgba(0, 0,0,0.08);
    border-bottom:  1px solid rgba(0, 0,0,0.08);
    border-left: 0;
    border-right: 0;
    outline:none;
    vertical-align: middle;
    height:20px;
}

/* 聚焦时保持边框效果，避免默认聚焦样式破坏透明边框 */
.location input[type=text]:focus{
    border-color: rgba(0, 0,0,0.08);
}

::placeholder{
    color:black;
    font-weight: bold;
}

.location a:visited{
    color:white;
}

.location a {
    background-color: #0065FC;
    padding:14px 15px 10px 15px;
    border-top-right-radius:10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    height:21px;
    vertical-align: middle;
    /* 给按钮加和input一致的上下边框，保持整体外边框统一 */
    border-top:  1px solid rgba(0, 0,0,0.08);
    border-bottom:  1px solid rgba(0, 0,0,0.08);
}

你提供的HTML代码无需修改，直接替换CSS即可实现对应的透明边框效果。

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