CSS/HTML:在输入字段周围创建发光边框

2024-03-17

我想为我的表单创建一些像样的输入,并且我真的很想知道 TWITTER 如何在输入周围制作发光边框。

Twitter 边框示例/图片:

我也不太知道如何创建圆角。


干得好:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

现场演示: http://jsfiddle.net/simvidas/CXUpm/1/show/ http://jsfiddle.net/simevidas/CXUpm/1/show/

(要查看演示的代码,请从 URL 中删除“show/”)

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS/HTML:在输入字段周围创建发光边框 的相关文章

  • 突出显示所选行 GridView

    当用户从网格视图中单击 编辑 时 我想突出显示该行 这是我所做的 但没有效果 我还缺少什么 SelectedRowStyle background color Yellow
  • 使用CSS自动流动2列文本[重复]

    这个问题在这里已经有答案了 我有类似于以下的代码 p This is paragraph 1 Lorem ipsum p p This is paragraph 2 Lorem ipsum p p This is paragraph 3 L
  • CSS 术语:这些叫什么?

    考虑 p foo bar CSS 中这些语句的正确名称是什么 我见过它们被称为选择器 规则或规则集 但哪个是正确的 将考虑一条规则 p 本例中的选择器是 p 规则由选择器和声明组成 声明是property value所以整个规则是 sele
  • 用于滚动文本的CSS文本动画[重复]

    这个问题在这里已经有答案了 我想我已经完成了一半 但我需要一些 CSS3 或 jQuery 帮助来完成这个滚动文本 我有一个 div 我需要文本从左向右滚动 然后当点击 div 末尾时再次从右向左滚动 依此类推 我目前从左到右 但它似乎在
  • 如何将砌体项目居中?

    我已经设置了砌体来显示项目 如下所示 list masonry itemSelector propitem columnWidth 230 这有效 但所有项目 propitem 向左浮动 例如 如果我的容器 list宽度为 600 像素 左
  • 当您在 iPad 上的 Safari 浏览器中触摸 HTML 元素时,它会变成灰色。决定嵌套元素中哪个元素显示为灰色的逻辑是什么?

    当您触摸 iPad 上网页中的某个元素 例如编辑框 时 它会在您触摸时变成灰色 我有一张由浮动 div 包裹的桌子 当触摸数据元素时 整个表 或其包装 div 不会变灰 而不是单个数据元素或行变灰 该表的功能是自动补全弹窗 在网站的其他地方
  • 透明

    从概念上讲 是否可以创建一个 div 显示内容 然后在内容上放置一个透明的 div 这样如果用户右键单击 gt 另存为 保存图像等 他们在执行此操作时将不会得到任何内容 是的 但它和 如果有人想复制您的内容 他们会
  • 颜色“透明”不起作用

    我的 IE 有问题 还有什么问题 我使用 CSS 生成内容 其中也有一个背景图像 我看起来是这样的 nav ul li after content position relative z index 99 background transp
  • 使用 CSS 检查滚动

    我正在尝试创建一个纯 100 CSS 无 jQuery 返回顶部 按钮 但我希 望该按钮仅在访问者向下滚动页面时显示 是否可以用 CSS 来检查这一点 因此 如果访问者向下滚动一点 则会显示 返回顶部 按钮 Thanks 根据光标位置确定
  • 如何在流体宽度容器中将左侧、中间和右侧的三个按钮放置在同一行?

    我在用着LESS在 Twitter Bootstrap 环境中 但我会直接接受CSS也有答案 Fluid width container Btn1 Btn2 Btn3 另一种宽度 Fluid width container Btn1
  • CSS中的继承是什么意思? [复制]

    这个问题在这里已经有答案了 我经常使用background inherit 像这样 许多其他 CSS 属性接受继承作为值 但有什么作用inherit意思是 它是如何工作的 inherit只是意味着样式将从元素的父元素继承 例如 jsFidd
  • 使用 CSS 实现等高元素

    我读到了几种不同的解决方案来模拟等高的列或元素 但没有一个真正引起我的注意 因为它们使用了 hack 极其复杂的 HTML 布局或未得到广泛支持的属性 这是例子Fiddle http jsfiddle net weppos satgw 我的
  • 滚动内容上的 CSS 框阴影

    我想要一个带有插入框阴影的 div 其中包含滚动的内容 不幸的是 盒阴影不会投射在内容中的元素上 而是投射在背景上 但我希望它也覆盖内容元素 我偶然发现了这个解决方案 http jsfiddle net HPkd3 http jsfiddl
  • vuetify v-text-field 给定值后背景颜色发生变化

    我正在使用 vuetify 创建登录表单 并使用 v text field 作为输入 当有字段建议时就会出现问题 例如 我的浏览器中保存了多封电子邮件 它会在电子邮件字段上为我提供这些电子邮件的建议 到目前为止一切都很好 但是当我选择其中之
  • 如何使用 Java 以编程方式登录 Facebook?

    我正在尝试编写一个可以自动登录 Facebook 的 Java 程序 到目前为止 我已经得到了以下代码 可以将主页 html 页面下载到字符串中 但不知道如何发送电子邮件和密码来登录 Facebook Java 程序还需要处理返回的 coo
  • 使用 html 表收集提交表单中的各种数据

    我有一个 jsp 页面 其中包含一个表 分页并带有顺序列 一个搜索字段和其他基于复选框的过滤器 这样 当我单击按钮时 它会采用表格的分页 表格的顺序 搜索字段中的值以及最终的其他参数 复选框 来执行查询 目前 该表具有分页和使用标签库排序的
  • 为什么弹性物品会包裹而不是收缩?

    我想知道是否有人可以给我一个关于如何计算 Flexbox 布局的简单介绍 特别是优先级顺序 例如 div style display flex div style height 200px background color lightgre
  • 如何对列表进行垂直排序?

    我在下面使用这个HTML and CSS对列表进行排序的代码vertical 输出是horizontal sorted 我的示例代码
  • Spring MVC - 两次提供内容

    我已经花了一周时间寻找有关如何将内容服务器到我的网页的指导 两次 因为使用 Model 或 ModelAndView 切断内容一次可以工作 但如果用户再次与页面交互 我希望它加载更多内容同一页 Java Spring 后端方法 Get 有效
  • 视频作为网站背景? HTML 5

    我想使用视频作为背景 而不是自动拉伸到整个屏幕 背景 的图像 我还想旋转视频和图像 以便以任何顺序显示随机视频 图像 如果知道如何延迟视频播放 以便视频在网站加载后 30 秒只播放一次 那就太好了 thx 看看我的 jquery video

随机推荐