首页 > 其他分享 >input样式重置

input样式重置

时间:2023-06-26 20:45:43浏览次数:57  
标签:none outline 样式 重置 输入框 input

input样式重置(outline:none)

  input样式重置(outline:none)

我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢?

     例如简单的三个空按钮: 

   <input type="button" id="btn1">
   <input type="button" id="btn2">
   <input type="button" id="btn3">

     来个简单的样式:

   width: 50px;
   height: 50px;
   border-radius:50%;

 

    运行如下图显示的(各个浏览器之间默认样式有所差距):

      

   所以,首先要将input输入框的默认样式去掉(让其在任何地方显示的一样):

      border:0;

      outline:none;

   再看效果:

      ;

    这样就ok啦;

标签:none,outline,样式,重置,输入框,input
From: https://www.cnblogs.com/ssmushui/p/17506654.html

相关文章

  • QT样式表使用
    https://blog.csdn.net/qq_32348883/article/details/1226868321.前言QT使用样式表通常有三种方式:1.在UI设计器---QtDesigner内添加并设置样式;优点:直观显示。缺点:样式比较多时,不利于检查样式是否编写错误。同时不可以二次修改,即界面显示完毕后无法通过此方法修改界......
  • CSS样式(内联、内部、外部)
    https://blog.csdn.net/xiji333/article/details/111283931文章目录1.内联样式2.内部样式3.外部样式1.内联样式  内联样式,又称行内样式。在标签内部通过stylestylestyle属性来设置元素的样式。<!DOCTYPEhtml><html><head><metacharset="utf-8"><ti......
  • el-input 去除 上下箭头
    /*去掉input尾部上下小箭头start*/.page-input-number-none-triangleinput::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none!important;-moz-appearance:none!important;-o-appearance:none!important;......
  • 引入第三方css样式
    方式一1.将bootstrap.min.css放入src下assets目录 2.app组件中引入样式import'@/assets/bootstrap.min.css'如果使用import引入,会严格检查,当字体文件不存在时,会报错 方式二1.将第三方样式放入目录:public/css目录下 2.在index.html文件中引入样式<linkrel="ic......
  • InputStream和OutputStream
    (一)说明InputStream和OutputStream是Java标准库中最基本的IO流,它们都位于java.io包中,该包提供了所有同步IO的功能。java.io.InputStream、java.io.OutputStream(二)用法1.read&writeInputStream和OutputStream都不是接口,而是抽象类,它们分别是所有输入流和输出流的超类。这两......
  • 前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
    前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13166效果图如下:cc-defineKeyboard使用方法<!--ref:唯一ref passwrdType:密码样式paykeyInfo:密码输入监测事件--><cc-def......
  • Echarts配置系列-图文并茂教你配置各种图表样式
    @Echarts配置系列说明本文列举了各种常用的图表各种常用配置信息可以通过下面链接测试你的demo配置哦https://echarts.apache.org/examples/zh/editor.html?c=area-basic渐变色面积图代码配置option={title:{text:'每天都要开心呀'}......
  • 前端怎么使用node-input-validator给接口添加参数校验(以strapi 4.9为例)
    node-input-validator是什么?简称NIV(NodeInputValidator)用于node.js的验证库使用它可以扩展库以添加自定义规则。npmNIV文档使用方法我们以strapi4.9版本项目为例,来试用一下它对我们接口的校验规则下载依赖npminode-input-validator在项目中创建全局中间件......
  • InputStream和Reader区别
    InputStream,OutputStream  前者为字节输入流,后者为字节输出流。Reader   Writer  前者为字符输入流,后者为字符输出流。四个均为抽象类。fileInputStream 是InputStream 的实现类  fileReader 是Reader 的实现类字节流读取单位为一个字节,字符流读取单位为一个字符......
  • 直播开发app,css 自定义滚动条样式
    直播开发app,css自定义滚动条样式<divclass="content-wrap">  <div>    内容XXXX  </div> </div>  <style> //content-wrap样式.content-wrap{  flex:1;  overflow-y:scroll;  box-sizing:border-box;  padding:010px;  ......