不遵循@media样式的数字输入[关闭]

问题描述 投票:-1回答:1

我已经设置了一个页面,下面有@media查询,可以为移动访客调整大小:

@media all and (max-width: 600px) {
  #survey-container {
    width: 100%;
    font-size: 8px;
    }
    .input-field {
    width: 85px;
    }
    .input-select {
    width: 85px;
    }
  }
  @media all and (max-height: 800px) {
  #survey-container {
    min-height: 100%;
    }
  }

input-field类附有所有input标签,类型为numbertextemail,而input-select用于下拉输入。但是,我对Age的输入并不遵循@mediainput-field样式,如下所示:

the result

可以看出,Age的字段与其他字段的大小不同,尽管由同一类input-field设计。

奇怪的是,我可以将字段的width设置为75px,它们甚至会出来,但我不希望它们是75px。此外,通过将input-typenumber更改为text,它们的大小都是85px,但是Age输入必须是number,因此不能使用该解决方案。

html css input media-queries
1个回答
1
投票

尝试使用:

#survey-container input[type="text"],
#survey-container input[type="email"],
#survey-container input[type="number"],
#survey-container input[type="select"]{
width: 85px;
}
© www.soinside.com 2019 - 2024. All rights reserved.