表格内下拉框与地址输入框CSS背景消失及宽度适配问题求解

问题1 输入框、下拉框背景色消失解决方案 #

你当前CSS中给td input设置了background: transparent，强制输入框背景为透明，是背景色消失的核心原因。可根据需求选择对应方案：

• 若希望输入框、下拉框背景和单元格背景保持一致：直接删除background: transparent配置即可，或显式设置background-color: #548EA3
• 若希望输入框使用独立的自定义背景：将background: transparent替换为对应的色值即可，比如需要白色输入框就写background-color: #ffffff

问题2 输入框、下拉框占满单元格全宽解决方案 #

你已经给input设置了width: 100%，但没有覆盖下拉框select元素，且缺少盒模型适配，按如下调整即可：

• 将选择器td input修改为td input, td select，让下拉框也适配宽度规则
• 新增box-sizing: border-box属性，确保输入框、下拉框的内边距、边框都纳入100%宽度计算，不会撑破单元格
• 可额外配置border: none去掉元素默认边框，视觉上更贴合表格样式

调整后完整CSS代码 #

table,th,td{
border-spacing:2px;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
border: 1px solid white; 
}
td{
color:#FFFFFF;
background-color:#548EA3;
border-spacing:5px; 
}
td input, td select {
    width: 100%;
    /* 不需要透明背景可删除/修改下一行 */
    background: transparent;
    box-sizing: border-box;
    /* 可选配置，可根据需求调整 */
    border: none;
    color: inherit;
}

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