CSS------制作一个带+-的input框

如图：

代码：(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>
时间： 2024-10-14 01:02:03

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

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

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

制作一个简单的文本框输入的网页

题目:制作一个简单的网页(包含一个文本框.一个按钮),在页面上输出用户在文本框输入的内容,要求用JavaScript获取文本框内容. 一.首先利用html在网页上制作表单,代码如下: **onclick事件:onclick 事件会在对象被点击时发生. 二.利用js获取输入信息,并将其输出: 相关知识: 1.给用户确认消息,真正实现交互,使用语句confirm();给用户提示信息,实现单向通信,使用语句alert(). 三.运行结果: 1.用浏览器打开结果如下: 2.输入文本框内容,点击[提交]:

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

1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可 通过 transform 旋转盒子 方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言) 2. 设计 2.1 边框法 html结构 ? 1 2 3 <bod

纯css写一个带动画的弹框 visibility + opcity

css能实现各种各样的动态效果,比js实现简单,性能也比js实现高,现在我们就用纯css实现弹窗,主要用到了两个属性 opcity 和 visibility, opctiy 这个属性很简单 控制元素透明度 ,visibility控制元素的显示和隐藏,他和display有一个很重要的区别,visibility可以用transition来进行过渡,而display并不可以,这就是我们不用display的原因 可以配合上transform: scale() 让弹窗更有动态感觉 全部代码: <!DOCT

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

今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯.(参考地址:http://www.ithao123.cn/content-5672159.html) 实现图示的效果涉及到的知识主要有两点:一个是before.after伪元素,一个是border 1.before 和 after 都是css中的伪元素,通过给定一个属性content给元素添加新的

制作一个在指定区域显示模态框

//添加权限模态框 function addRoleModal() { var $navPanelRight = $(".nav-panel-right") var $roleContent = $(".role-content") $roleContent.removeClass('hidden') $roleContent.css({ top : $navPanelRight.position().top + 200, left : $navPanelRight

用HTML+css制作一个漂亮的烟花动画

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background-color: black; } .pao{ position: absolute; left: 50%; height: 150px; bottom: 0px; ani

制作一个带SNTP的智能手表

智能手表已成为穿戴设备中最重要的一项.我使用了mbed网页编译器.建议你也使用mbed网页编译器. 计划如下. - WIZwiki-W7500 + OLED + bluetooth + 安卓手机 但是-时间值数据错误(从智能手机获取数据) 所以,我改变了计划. WIZwiki-W7500 + OLED + Ethernet + NTP服务器 系统操作 1. 初始化时,网络时间从NTP服务器获取 2. 接下来,使用MCU中的RTC计时 3. 几秒后,就从小号的yy/mm/dd h/m/s变成了大号

css制作一个音频声波效果

1.template代码 <view class="voice-image"> <view class="lines"> <text class="hr hr1" style="{{lineAnimation?'animation:liner .5s -1s ease-in-out alternate infinite;':''}}"></text> <text class