首页
学习
活动
专区
工具
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

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

相关·内容

Fabric.js 右键菜单

---- PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛 本文简介 Fabric.js 默认**没提供 鼠标右键事件**,只有 鼠标按键点击 、鼠标按键抬起 、鼠标移动 等事件...但在工作中有可能需要用到 “右键” 事件,比如 “右键菜单” 。所以就有了本文。...stopContextMenu:禁用默认右键菜单 mouse:down:鼠标点击事件 如果不知道 Fabric.js 的同学,可以看 《Fabric.js 从入门到___》 本案例是使用原生方式开发,基于...,菜单在鼠标左侧,菜单在鼠标上方,菜单在鼠标下方); 左键单击画布其他地方,隐藏菜单; 实现思路: 创建画布; 创建 “菜单” 的DOM元素; 去官网查找 “右键相关事件”; 右键单击在元素,根据鼠标离画布边缘的距离...,计算菜单要显示的位置; 左键单击在画布,隐藏菜单; 实现 查文档 在上面的思路中,其实难点只有 “右键相关事件” 。

7.1K10

移动web开发需要注意的二十点

3、放弃CSS float属性 在项目开发过程中可以会遇到内容排列排列显示的布局,假如你遇见这样的视觉稿,建议你放弃float,可以直接使用display:block; 4、利用CSS3边框背景属性 这个按钮有圆角效果...7、学会使用webkit-box 一条,我们说过自适应布局模式,有些同学可能会问:如何在移动设备做到完全自适应呢?...在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式...18、如何解决Android 2.0以下平台中圆角的问题 如果大家够细心的话,在做wap站点开发时,大家应该会发现android 2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。...在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角: -webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加); 如果对针对边框做样式定义

1.9K20
  • Windows 7 操作系统

    3.窗口——边框  组成窗口的四条边线称为窗口的边框,拖动边框可以改变窗口的大小。...所谓活动窗口是指该窗口可以接收用户的键盘和鼠标输入等操作,非活动窗口不会接收键盘和鼠标输入,但相应的应用程序仍在运行,称为后台运行。 3.窗口——地址栏  地址栏显示当前文件或文件夹所在的路径。...只要用鼠标拖动桌面上的图标,就可以将图标移动到自己喜欢的位置。  在桌面的任意空白处右击,将出现一个快捷菜单。...(4)语言栏:显示当前的输入法状态。  (5)通知区域:包括时钟、音量、网络以及其他一些显示特定程序和计算机设置状态的图标。  ...(6)“显示桌面”按钮:鼠标指针移动到该按钮,可以预览桌面,若单击该按钮可以快速返回桌面。

    37530

    WEBAPP开发技巧总结

    、 chrome都能够正常的显示,你无需再次考虑设备的分辨率。...7、学会使用webkit-box 一节,我们说过自适应布局模式,有些同学可能会问:如何在移动设备做到完全自适应呢?...在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊...18、如何解决Android 2.0以下平台中圆角的问题 如果大家够细心的话,在做wap站点开发时,大家应该会发现android 2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。...在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角: 1\-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);

    2K20

    HTML-CSS基础学习

    datagrid 表示可选数据的列表,以树形列表形式显示 email 表示必须输入E-mail地址的文本输入框 url 表示必须输入URL地址的文本输入框 number...左边框宽度 border-width 复合属性 参数(all;上下左右;上下、左右;、左右、下) 圆角边框 border-top-left-radius 边框左上角圆角半径 border-top-right-radius...边框右上角圆角半径 border-bottom-right-radius 边框右下角圆角半径 border-bottom-left-radius 边框左下角圆角半径 border-radius...auto自动;shape按照形状定义显示 布局属性 display属性 用来确定页面元素是否显示以及显示方式,不可继承 float属性 用来定义元素是否浮动以及浮动方式 clear属性 用来定义不允许有浮动对象的边...overflow-y属性 指明如果溢出元素内容区域的话是否对内容的上下边缘进行裁剪 overflow -visible 裁剪内容,可能会显示这内容框外 -hidden 裁剪内容,不提供滚动机制

    4.8K30

    移动端开发需要注意事项

    因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大 3.自适应布局模式 在编写CSS时,我建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。...、chrome都能够正常的显示,你无需再次考虑设备的分辨率。...用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!...在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式...10.如何解决Android 2.0以下平台中圆角的问题 在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角: -webkit这个前缀必须要加上(在

    42820

    腾讯开源超实用的UI轮子库,我是轮子搬运工

    QMUIListPopup 继承自 QMUIPopup,在 QMUIPopup 的基础,支持显示一个列表。...QMUIRadiusImageView 提供为图片添加圆角边框、剪裁到圆形或其他形状等功能。 QMUIRoundButton 对 Button 提供圆角功能,支持以下特性: 指定圆角的大小。...分别指定不同方向的圆角大小。 指定圆角的大小为高度的一半,并跟随高度变化自适应圆角大小。 支持分别指定背景色和边框色,指定颜色时支持使用 color 或 ColorStateList。...每个 Tab 都可以非常灵活的配置,内容支持文字和 icon 的显示,icon 支持选中态,支持内容的排版对齐方向设置,支持显示红点,支持插入自定义的 View,支持监听双击事件等。...QMUIDrawableHelper 快速绘制一张指定大小、颜色、边框的图片,支持形状为圆角矩形和圆形。 快速绘制一张带上分隔线或下分隔线的图片。 快速绘制一张可带圆角的渐变图片。

    4.8K30

    细说移动端 经典的REM布局 与 新秀VW布局

    ,它是显示设备中一个最微小的物理部件。...每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。 理论,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示 ?...但在移动设备就有点复杂。 移动端的viewport太窄,为了能更好为CSS布局服务,所以提供了两个viewport:虚拟的visualviewport和布局的layoutviewport。...边框圆角一般作用于多边边框,使用了伪类设置边框之后,元素本身并没有边框,所以我们需要对伪类设置圆角,此外,也需要对元素本身设置圆角 否则就会出现这种尴尬的情况 ? ?...如果只是需要设置圆角,其实也可以设置边框,可以使用背景颜色来营造出这种“边框”的分界,在VW布局中,显示地设置边框可能会造成代码量太多 ?

    12K42

    BootStrap基础知识

    flex-*-grow-0 不同的荧幕设备设置扩展 flex-*-grow-1 不同的荧幕设备设置扩展 flex-*-shrink-0 不同的荧幕设备设置收缩 flex-*-shrink-1 不同的荧幕设备设置收缩...flex-*-nowrap 不同的荧幕设备设置包裹元素 flex-*-nowrap 不同的荧幕设备设置包裹元素 flex-*-wrap 不同的荧幕设备设置包裹元素 flex-*-wrap-reverse...>鼠标移动到我这 提示框是一个小小的弹窗,在鼠标移动到元素显示,鼠标移到元素外就消失。 通过向元素添加 data-toggle=”tooltip” 来来创建提示框。...如果你想实现在鼠标移动到元素显示,移除后消失的效果,可以使用 data-trigger 属性,并设置值为 "hover"。 Scroll滚动监听 例: <!...白色边框 rounded 添加圆角边框(需配合以上border使用,下同。)

    28010

    移动webapp前端开发小结

    想达到全屏显示的效果必须先通过Safari将网页添加到主屏,再通过主屏的图标打开网站,直接在Safari输入URL是不行的。...即:取得查看页面的设备的关键信息(比如大小、分辨率、色深,等等),并根据该信息采用不同的CSS样式,或是更换完全不同的样式。...如果我们针对不同分辨率的移动设备匹配同一套CSS样式(比如:字体、图片大小等),最终显示的结果很可能某些分辨率的效果不错、而其他分辨率的显示效果则会千差万别。...所以,我们需要为不同分辨率的设备,匹配不同的样式。 如果有web端工作经验,应该不难想到自适应布局,即在整体布局采用百分比,而写具体的px值。除了整体布局,我们还需要考虑字体、图片/图标大小。...下、左、右不同方向的边框,即可显示不同方向的三角形。

    1.3K20

    移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...: 7px 10px; padding-left: 25px; /* 设置搜索圆角矩形半径 */ border-radius: 5px; /* 设置盒子模型阴影 */...-- 搜索栏提示内容 --> 输入搜索信息 <!...iOS加上这个属性才能给按钮和输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面时的弹出菜单*/ img, a {...: 7px 10px; padding-left: 25px; /* 设置搜索圆角矩形半径 */ border-radius: 5px; /* 设置盒子模型阴影 */

    33620

    HTML5 与CSS3 相关笔记

    " name="range" min="0" max="100" step="10"/> (7)search搜索框:在任意页面中用于输入搜索关键词的文本框 <input type="search" name...42.border-radius圆角边框:语法和边框相似,只是四个边框圆角 (语法)border-radius:length{1~4个数字}; (1)用border-radius制作特殊图形 圆形:...none:元素不会显示 46.Float:指定网页元素向哪个方向浮动 left左、right右、none默认无(元素不浮动 显示在其文本出现的位置) 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动...常用2D变形函数如下: (1)translate(tx,ty): 平移函数,将元素从原位置(基于X,Y坐标)移动到指定位置。 tx表示X轴(横坐标)移动的向量长度,正值向右,负值向左。...important要写在分号的前面,但注意当网页制作者设置css样式时,浏览器会按照自己的样式来显示网页。

    5.4K30

    移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

    一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用...固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示搜索栏 ; 搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个外边距..., 避免显示搜索栏下方 ; .banner { /* 上面的搜索栏是固定定位的 如果使用默认设置 该 Banner 栏会被搜索栏盖住 因此这里设置一个 44 像素的外边距 *...-- 搜索栏提示内容 --> 输入搜索信息 <!...iOS加上这个属性才能给按钮和输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面时的弹出菜单*/ img, a {

    53720

    emWin学习

    2.2、显示文本 可以显示字符串、十六进制、十进制、二进制数,文本可以定位在屏幕的任何像素。...2.3 按钮控件 控件也是一个窗口,可以创建在其他窗口中或者直接在桌面上创建。按键也可以调用BUTTON_SetBitmapEx();函数在按钮显示一个位图。...WM_SetCreateFlags(WM_CF_MEMDEV); 使用存储设备,放在GUI_Init() 函数之前,桌面也使用存储设备,我的iconview窗口是在桌面上创建的,不使能存储点击图标的时候...这是在PC仿真器的效果,具体的等在stm32测试。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.9K10

    移动端常用的meta总结

    声明viewport视口 viewport对于移动设备来说非常的重要,用于定义视口的各种行为。...其中最为重要的就是要设定一个展示页面的宽度width=device-width,如果我们设置的话,width默认的值是980PX,假设我们当前用的是IPHONE 5来访问H5页面,IPHONE 5本身的宽度只有...这种方式用户的体验度会非常的差,所以我们设定width=device-width,意思是当前设备屏幕有多宽,那么就按照多宽来渲染页面,这样就不会出现需要靠缩小或者左右移动来看完整个页面了。...“四边圆角”、“高光处理”。...rel="apple-touch-icon-precomposed"是设定按照设计稿原图的图标显示,rel="apple-touch-icon"是设定在原图的基础增加一些高光光亮效果。

    1.1K30

    Win11 的这 19 个新功能,你都用上了吗?

    5、全新触控键盘 微软终于在 Windows 重新设计了触摸键盘! 作为重新设计的一部分,您可以在多个键盘布局之间切换。取消停靠时,Windows 允许您切换到小键盘布局,可以轻松地在屏幕移动。...您可能知道,某些设备使用 CABC 技术来提高电池性能,但该功能的问题在于它会降低图像质量。事实,它甚至会导致恼人的亮度变化并影响色彩准确性。...我们在资源管理器中得到了一些圆角。例如,右键单击(上下文菜单)已更新为圆角和类似 Fluent Design 的阴影效果。...Microsoft 对 Windows 11 的搜索引擎进行了一些更改,以帮助提高操作系统扫描系统可用文件类型、协议和应用程序列表时的性能。...由于使用率低,微软还删除了数学输入面板。但是,您仍然可以通过“设置”>“应用程序”>“应用程序和功能”下载并安装“数学输入面板”来使用输入控制和数学识别引擎。

    23.6K30

    Windows 11的这19个新功能,你都知道吗?

    5、全新触控键盘 微软终于在 Windows 重新设计了触摸键盘! 作为重新设计的一部分,您可以在多个键盘布局之间切换。取消停靠时,Windows 允许您切换到小键盘布局,可以轻松地在屏幕移动。...您可能知道,某些设备使用 CABC 技术来提高电池性能,但该功能的问题在于它会降低图像质量。事实,它甚至会导致恼人的亮度变化并影响色彩准确性。...我们在资源管理器中得到了一些圆角。例如,右键单击(上下文菜单)已更新为圆角和类似 Fluent Design 的阴影效果。...Microsoft 对 Windows 11 的搜索引擎进行了一些更改,以帮助提高操作系统扫描系统可用文件类型、协议和应用程序列表时的性能。...由于使用率低,微软还删除了数学输入面板。但是,您仍然可以通过“设置”>“应用程序”>“应用程序和功能”下载并安装“数学输入面板”来使用输入控制和数学识别引擎。

    3.6K20
    领券