输入框圆角

最新推荐文章于 2024-04-24 17:04:10 发布
最新推荐文章于 2024-04-24 17:04:10 发布
阅读量2k 收藏 3
点赞数 3
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35679291/article/details/77868249
版权

首先 说一下input 当鼠标点击输入框的时候 也就获取焦点的时候 input外会出现outline 但是这个outline 没有圆角 不想border有border-radius

这样就出现问题啦 input的border有border-radius 圆角
但是当获取焦点时的outline没有圆角
这里写图片描述
这里写图片描述
这样的问题怎么解决呢 ?
往下看
既然outline没有圆角 ,我们就不用它

我来找一个替代的写法 用什么呢?
用box-shadow

当获取焦点时
outline:none;
border:1px solid blue;
box-shadow:0 0 1px 2px #9ec0f7;
这样就会有一个和outline 一样的效果 但是是带圆角的哦!!!
这里写图片描述

小牛呗
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui快速入门之第十节 表单
qq_61313896的博客
09-15 1640
Layui快速入门之第十节 表单
前端LayUI框架快速上手详解(一)
2401_83915664的博客
03-29 1091
默认圆角按钮 原始圆角按钮 百搭圆角按钮 暖色圆角按钮 警告圆角按钮 禁用圆角按钮。侧边导航: 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔。属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)| lay-even | 无 | 用于开启隔行背景，可与其他属性一起使用 |
layui框架（按钮和导航栏的用法风格）
q_2540638774的博客
12-10 2801
一、按钮的用法风格 1、按钮样式 <button class="layui-btn layui-btn-primary">原始按钮</button> <button class="layui-btn">默认按钮</button> 效果图： 其他主题风格： 圆角按钮样式，追加：layui-btn-radius <button class="...
el-input 设置为圆角
最新发布
weixin_55721538的博客
04-24 399
el-input 设置为圆角
layui UI前端 输入框的基本属性
weixin_44570988的博客
09-09 3986
layui的呈现最终在于对form模块的自动渲染，下面描述是基本的结构 <div class="layui-form-item"> <label class="layui-form-label">文字内容</label> <div class="layui-input-block"> 表单元素 </div> </div> 如果不喜欢layui定义的结构，可以进行修改，但是一定要在外层容器中定义class=“lay
layui 中html边框圆角,UIButton设置圆角和边框及边框颜色
weixin_31516001的博客
07-08 1779
UIButton设置圆角和边框及边框颜色[box.actionButton.layer setMasksToBounds:YES];[box.actionButton.layer setCornerRadius:10.0]; //设置矩形四个圆角半径//边框宽度[box.actionButton.layer setBorderWidth:1.0];//设置边框颜色有两种方法：第一种如下:CGCol...
LayUI
yao_guai688的博客
05-06 557
一.layUI 1.特点：layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果；提供给后端开发人员的ui框架，基于DOM驱动。 2. ...
输入框圆角实现方法
Coding
12-03 1078
UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 300, 50)]; [testView.layer setMasksToBounds:true]; [testView.layer setBorderColor:[UIColor grayColor].CGColor]; [testView.layer s...
layer 弹出层设置圆角
m0_61236764的博客
12-02 856
【代码】layer 弹出层设置圆角。
为圆角添加阴影
了凡
06-28 1418
为圆角添加阴影 通常在对layer做圆角的时候，会设置 layer.cornerRadius = 50 如果还需要对内容进行裁剪，还要设置 layer.masksToBounds = true 但此时如果再对layer设置阴影，如下： layer.shadowOffset = CGSize(width: 4, height: 4) layer.shadowOpacity = 0.3 l...
iecss3.htc支持输入框圆角
06-19
支持IE页面输入框圆角，完美解决。记得阅读里面的文档帮助
圆角输入框
08-29
winfrom程序中美化TextBox控件，实现圆角，可带图片，具体可以下载根据代码调试，本代码中图片在后面，也可调至文本框前面
Flutter入门与实战：带有【添加】按钮的圆角输入框
09-18
Flutter入门与实战：带有【添加】按钮的圆角输入框
iOS中修改UISearchBar圆角的小技巧分享
08-30
UISearchBar也是iOS开发常用控件之一，点进去看看里面的属性barStyle、...下面这篇文章主要给大家分享了iOS中修改UISearchBar圆角的小技巧，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
js注册表单错误输入框红色圆角提示效果
06-12
类似这种注册页面，国外已经很普遍了，只是国内的还比较少。火狐浏览器下，提示框为圆形渐隐渐现效果，IE浏览器下则差一点儿，为长方形效果
layui页面元素使用（一）
热门推荐
Andy_lau
05-31 3万+
目录：     1.页面元素控件的清单     2.每个控件的使用方法     1.页面元素控件的清单       2.每个控件的使用方法     2.1 字体图标            1） 在内链元素中设置 class="layui-icon" 然后设置图标的Unicode编码即可显示图标，图标的颜色和大小设置方法和css设置字体
自用--Layer图层圆角、边框、底纹及其他常用操作
wxdtan的专栏
06-08 1263
转载自：http://blog.csdn.net/hopedark/article/details/16116057 自用Layer笔记
Layer 图层圆角、边框 、底纹其他常用操作
think12的专栏
04-23 1万+
#import  // 添加系统框架   layer.backgroundColor = [UIColor cyanColor].CGColor; // 给图层添加背景色 layer.contents = (id)[UIImage imageNamed:@"view_BG.png"].CGImage; // 给图层添加背景图片 layer.cornerRadius = 8;  // 将图
layer插件弹出显示圆角
weixin_34124939的博客
11-10 2722
前段时间产品要求我们做的弹窗要显示成圆角，这个可为难我了，我是用layer 2.1这个插件，怎么设成圆角说明文档还真没说， 只好baidu一下，也没找到好的解决方案，只好去分析一下layer插件的样式，发现弹出层div 有个layui-layer的样式，有名堂， 1.在浏览器点掉 background-color:点掉 #fff,居然可以显示圆角了 2.把这个 border-radius ...
layui 动态添加 layui-input-block
06-10
要动态添加 layui-input-block，可以使用jQuery的append方法。首先，你需要在HTML文件中引入Layui框架和jQuery库： ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> ``` 然后，在JavaScript代码中，你可以使用以下代码来动态添加 layui-input-block： ```javascript // 创建一个 layui-input-block 元素 var inputBlock = $('<div class="layui-input-block"></div>'); // 往 inputBlock 中添加元素 inputBlock.append('<input type="text" placeholder="请输入内容" class="layui-input">'); // 将 inputBlock 添加到页面上指定的元素中 $('#targetElement').append(inputBlock); ``` 在上面的代码中，我们首先创建了一个 layui-input-block 元素，然后向它中添加了一个 input 元素。最后，我们使用 jQuery 的 append 方法将这个 inputBlock 添加到页面上指定的元素（例如，id 为 targetElement 的元素）中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值