如图：

代码：(div和input之间要连续写在一起，不能换行)

<div style="font-size:36px;margin-top:30px">

<div style="display:inline;background-color:#f9f9f9;padding-left:5px;padding-right:5px;border:1px solid #aaa">-</div>
<input type="number" value="1" readonly style="text-align:center;font-size:25px;height:45px;margin-top:-6px;width:100px;border-left:0px;border-right:0px;border-bottom:1px solid #aaa"/>
<div style="display:inline;background-color:#f9f9f9;border:1px solid #aaa">+</div>

</div>

CSS------制作一个带+-的input框的更多相关文章

  1. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  2. html制作一个美观的搜索框

    一般情况下搜索栏就是form标签中的一个input标签. 如: <form> <input type="text" placeholder=" 搜索关键 ...

  3. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  4. No.7 - 使用 animate.css 实现一个优雅的登录框

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  5. css制作三角形，下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  6. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  7. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  8. 百度前端笔试题目--css 实现一个带尖角的正方形

    今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...

  9. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

随机推荐

  1. 【刷题】LOJ 6223 「网络流 24 题」汽车加油行驶问题

    题目描述 给定一个 \(\text{N}\times \text{N}\) 的方形网格,设其左上角为起点◎,坐标为 \(\text{(1,1)}\) ,\(\text{X}\) 轴向右为正, \(\t ...

  2. C++实用整数快速输入输出模板（C++）

    随便写一点放在这里,以后想蛇皮卡常就很方便啦 蒟蒻太懒了,也就暂时不搞什么封namespace之类的操作了 程序结束时记得flush一下. #include<cstdio> #define ...

  3. 洛谷P4172 [WC2006]水管局长 （LCT，最小生成树）

    洛谷题目传送门 思路分析 在一个图中,要求路径上最大边边权最小,就不难想到最小生成树.而题目中有删边的操作,那肯定是要动态维护啦.直接上LCT维护边权最小值(可以参考一下蒟蒻的Blog) 这时候令人头 ...

  4. python里使用正则表达式的非贪婪模式

    在正则表达式里,什么是正则表达式的贪婪与非贪婪匹配 如:String str="abcaxc"; Patter p="ab*c"; 贪婪匹配:正则表达式一般趋向 ...

  5. 【BZOJ1227】[SDOI2009]虔诚的墓主人（线段树）

    [BZOJ1227][SDOI2009]虔诚的墓主人(线段树) 题面 BZOJ 洛谷 题解 显然发现答案就是对于每一个空位置,考虑上下左右各有多少棵树,然后就是这四个方向上树的数量中选\(K\)棵出来 ...

  6. PHP多条件模糊查询

    所使用的方法:$sqlArr=array();array_push();implode(); 原理, 一.建立sql语句前半句,并且建立一个空数组. 二.根据条件是否为空来判断是否向数组中添加元素.如 ...

  7. vim使用入门设置

    分为以下四步. 1,安装vim 2,安装git yum -y install vim git (Fedora/CentOS) /apt-get install vim git (Debian/Ubun ...

  8. Flink流处理操作符

    一.工程创建与准备 使用maven进行工程创建,且采用提供的flink-quickstart模版,便利很多.

  9. Tomcat权威指南-读书摘要系列9

    从源代码组建Tomcat 安装Apache Ant ant是make的开放源代码的替代品,而且是专门为java程序语言设计. Ant的最初用途是作为Tomcat的组建工具: 之后,Ant成为Java软 ...

  10. 数据结构（三）串---KMP模式匹配算法之获取next数组

    (一)获取模式串T的next数组值 1.回顾 我们所知道的KMP算法next数组的作用 next[j]表示当前模式串T的j下标对目标串S的i值失配时,我们应该使用模式串的下标为next[j]接着去和目 ...