首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

输入搜索表单在移动设备上显示圆角边框,但在桌面上不显示

在移动设备上显示圆角边框,但在桌面上不显示,可以通过CSS样式来实现。

首先,我们可以使用CSS的@media查询来判断设备类型,然后针对移动设备和桌面设备分别设置样式。

对于移动设备,可以使用border-radius属性来设置圆角边框,例如:

代码语言:txt
复制
@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,即不显示圆角边框,例如:

代码语言:txt
复制
@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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券