文本输入框宽度设置无效求助：单独设置div类样式不生效

问题原因 #

你给.inpt1/.inpt4这类div容器设置width，但div的宽度样式不会自动传递给内部的input元素，而且你已经通过全局input选择器给所有输入框设置了width:4vw，所以直接改div的width完全无效。

解决方法 #

使用后代选择器，精准选中对应div下的input元素，这样设置的样式优先级会高于全局input样式，就能单独控制每个输入框的宽度了。

修改后的CSS关键代码 #

把原来的.inpt4样式替换成下面的写法，其他需要单独设置的输入框也可以用同样格式：

/* 单独控制inpt4下的input宽度 */
.inpt4 input {
    width: 2vw;
}

/* 如需自定义其他输入框宽度，示例： */
.inpt1 input {
    width: 5vw;
}

完整修改后的CSS代码 #

body
{
    background-color: #b3d9ff;
}

#container
{

}

.button1
{
    position: absolute;
    top: 25vw;
    left: 52vw;
}

.button2
{
    position: absolute;
    top: 25vw;
    left: 45vw;
}

input
{
    height: 2vw;
    width: 4vw;
    display: block;
    color: black;
    border-radius: 1vw;
}

input:hover {background-color: #e6f2ff;}

input:active
{
    background-color: #99ccff;
    box-shadow: 0 5px #666;
    transform: translateY(8px);
}

.vragen
{
    text-align: center;
}

button
{
    height: 3vw;
    width: 30vw;
    border-radius: 1vw;
}

.lang
{
    height: 5.3vw;
}

.popup
{
    border: 0.5vw solid black;
    text-align: center;
    background: #a6a6a6;
    position: fixed;
    top: 10vw;
    left: 70vw;
    border-radius: 1vw;
    padding: 0 13vw 10vw;
}

button:hover {background-color: #cccccc;}

.inpt1
{
    position: absolute;
    top: 8.5vw;
    left: 12.5vw;
}

.inpt2
{
    position: absolute;
    top: 8.5vw;
    left: 7.5vw;
}

.inpt3
{
    position: absolute;
    top: 9.5vw;
    left: 21.6vw;
}

.vraag
{
    position: absolute;
    top: 1vw;
    left: 1vw;
}

.volgvraagid
{
    position: absolute;
    top: 1vw;
    left: 18vw;
}

.antwoord
{
    position: absolute;
    top: 7vw;
    left: 10vw;
}

/* 修正为后代选择器，直接控制input宽度 */
.inpt4 input
{
    width: 2vw;
}

额外提示 #

• 你原来的input:active里box-shadow: 12 5px #666写法有误，已修正为box-shadow: 0 5px #666（缺少水平偏移值，默认应为0）；
• 原代码中background-color:;属于无效写法，已补充了浅色系背景值，你可以根据需求调整。

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