文档章节

用 css 实现提示框的箭头

拉普拉斯婷
 拉普拉斯婷
发布于 2016/10/14 14:56
字数 263
阅读 39
收藏 1

用 css 实现提示框上增加箭头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{font-size: 16px;}
        form{
            position: relative;
        }
        input{
            width: 10em;
            padding: 0.3em 0.8em;
            border: 1px solid #ff7d00;
            border-radius: .2em;
            font-size: 125%;
            line-height: 1.5;
        }
        .callout{
            position: relative;
            width: 15.5em;
            font-size: 90%;
            line-height: 1.5;
            padding: .3em;
            border-radius: .2em;
            border:1px solid #ff7d00;
            margin-top: 10px;
            background: #e2c179;
        }
        .callout:before{/*给提示框描画出箭头*/
            content: "";
            position: absolute;
            top: -.41em;
            left: 1em;
            padding: .35em;/*画一个高为0.7em的正方形*/
            background: inherit;/*背景色和边框继承提示框的*/
            border: inherit;
            border-right: 0;/*去掉右和下边框*/
            border-bottom: 0;
            transform: rotate(45deg);/*旋转45度*/
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="请输入您的姓名">
        <div class="callout">
            请输入大于三个字符小于10个字符的正确的名字
        </div>
    </form>
</body>
</html>

输入图片说明

这个方法最酷的地方不仅是用纯 css 画出了小箭头,还有就是小箭头的背景和边框用了继承,所以后期即使要修改提示框的背景也很方便,以前居然用图片实现,想想工作量简直巨大。

© 著作权归作者所有

拉普拉斯婷
粉丝 0
博文 33
码字总数 5836
作品 0
深圳
私信 提问
CSS3实现Tooltip提示框飞入飞出动画

我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片。还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观不怎么好看。今天我来分享一下利用CSS3快速...

yykj
2014/04/14
2K
0
CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我...

哟猫Intry
2016/07/07
17
0
分享一个纯CSS开发的气泡式提示框

日期:2012-4-11 来源:GBin1.com 在线演示 在线调试 本地下载 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我...

gbin1
2012/04/12
0
0
人人网JavaScript面试题

http://www.phpchina.com/archives/view-42561-1.html 在phpchina上看到的,我的乖乖,如果不用框架或现场手写,我就直接可以歇菜了。 好奇的是,这样的试题一般多少时间内完成。 JavaScript...

陨落人间
2013/01/13
6.5K
43
通过css修改select下拉列表框的默认样式

通过css修改select下拉列表框的默认样式 资源共享2017-12-194 阅读 修改样式cssselect列表框 实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮...

资源共享
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

php 遇到 No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1...

chenhongjiang
今天
5
0
MySQL 基础

一、常用命令 在命令行中,配置好环境变量后,通过cmd可以直接进入mysql命令行模式,同时列举几种常用命令 # 进入mysql数据库,密码可以先不写,打完-p后再输入,防止被别人看到mysql -u账...

华山猛男
今天
6
0
简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
今天
5
0
用脚本将本地照片库批量导入到Day One中

因为目前iCloud 空间已经不足,其中95%都是照片,之前入手了DayOne,且空间没有限制,订阅费一年也不少,再加上DayOne作为一款日记App 也比较有名,功能方面最大的就是地理视图与照片视图,尤...

在山的那边
昨天
19
0
jupyter部署安装

python373 -m ipykernel install --name python373 ipython kernelspec list sc create myjupyterservice binpath="D:\apply\Python373\Scripts\jupyter-notebook --config=V:/my_work/jupyt......

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部