在移动设备上显示圆角边框,但在桌面上不显示,可以通过CSS样式来实现。
首先,我们可以使用CSS的@media查询来判断设备类型,然后针对移动设备和桌面设备分别设置样式。
对于移动设备,可以使用border-radius属性来设置圆角边框,例如:
@media (max-width: 767px) {
input[type="text"] {
border-radius: 10px;
}
}
上述代码中,@media (max-width: 767px)表示当设备宽度小于等于767像素时,应用该样式。input[type="text"]表示选择所有type为"text"的输入框。border-radius: 10px表示设置边框的圆角为10像素。
对于桌面设备,可以使用相同的@media查询,但是将border-radius属性设置为0,即不显示圆角边框,例如:
@media (max-width: 767px) {
input[type="text"] {
border-radius: 10px;
}
}
@media (min-width: 768px) {
input[type="text"] {
border-radius: 0;
}
}
上述代码中,@media (min-width: 768px)表示当设备宽度大于等于768像素时,应用该样式。input[type="text"]表示选择所有type为"text"的输入框。border-radius: 0表示不显示圆角边框。
这样,当在移动设备上访问页面时,输入搜索表单会显示圆角边框;而在桌面设备上访问页面时,输入搜索表单则不显示圆角边框。
推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),该产品可以帮助开发者深入了解移动应用的用户行为和使用情况,提供数据分析和用户行为分析等功能。产品介绍链接地址:https://cloud.tencent.com/product/mta
领取专属 10元无门槛券
手把手带您无忧上云