如图：

代码：(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. 【题解】 bzoj1911: [Apio2010]特别行动队 （动态规划+斜率优化）

    bzoj1911,懒得复制,戳我戳我 Solution: 线性DP(打牌) \(dp\)方程还是很好想的:\(dp[i]=dp[j-1]+a*(s[i]-s[j-1])^2+b*(s[i]-s[j-1 ...

  2. 【AI科技大本营】

    从AutoML.机器学习新算法.底层计算.对抗性攻击.模型应用与底层理解,到开源数据集.Tensorflow和TPU,Google Brain 负责人Jeff Dean发长文来总结他们2017年所做的 ...

  3. 洛谷 P1437 [HNOI2004]敲砖块 解题报告

    P1437 [HNOI2004]敲砖块 题目描述 在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖 都有一个分值,敲掉这块砖就能得到相应的分值,如下所示. 1 ...

  4. java旋转图片

    /** * 旋转角度 * @param src 源图片 * @param angel 角度 * @return 目标图片 */ public static BufferedImage rotate(I ...

  5. POJ 1062 昂贵的聘礼（图论，最短路径）

    POJ 1062 昂贵的聘礼(图论,最短路径) Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女 ...

  6. POJ 2235 Frogger / UVA 534 Frogger /ZOJ 1942 Frogger（图论，最短路径）

    POJ 2235 Frogger / UVA 534 Frogger /ZOJ 1942 Frogger(图论,最短路径) Description Freddy Frog is sitting on ...

  7. Meshgrid函数的基本用法(转载)

    在Numpy的官方文章里,meshgrid函数的英文描述也显得文绉绉的,理解起来有些难度. 可以这么理解,meshgrid函数用两个坐标轴上的点在平面上画网格. 用法: [X,Y]=meshgrid( ...

  8. 20145215卢肖明《网络对抗》逆向及Bof基础

    20145215卢肖明<网络对抗>逆向及Bof基础 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任 ...

  9. C#利用Zxing.net生成条形码和二维码并实现打印的功能

        开篇:zxing.net是.net平台下编解条形码和二维码的工具. 下载地址:http://pan.baidu.com/s/1kTr3Vuf Step1:使用VS2010新建一个窗体程序项目: ...

  10. Intellij IDEA导入web项目详解(解决访问的404)

    开始时的首页 点击modules 点击modules界面的Paths 点击Libraries 选择lib文件 点击Facets 选择项目 这就是我404的主要原因,因为小白第一次使用idea 所以很疯 ...