`
leifeng2
  • 浏览: 142508 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

input 边框样式

    博客分类：
  • css
CSSHTML 
阅读更多

1、input 边框样式

<input type="text"

id=""

name=""

value="只能输入数字"

maxlength="5"

onKeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"

style="border:1px solid;border-color:#00ff00;background:#ff0000" >

 

2、动态改变边框颜色

<HTML>
<HEAD>
<TITLE>鼠标移上去改变边框颜色 </TITLE>
<style type="text/css">
<!--
.output-body1{border:1px solid #ff0000;}
.output-body2{border:0px;} 
-->
</style></head>

 <BODY>
  <input type="text" id="test" value="1111111" class="output-body2" onmousemove="showborder(this)" onmouseout="hiddborder(this)">
 </BODY>
</HTML>
<script>
function showborder(obj)
{
 obj.className="output-body1";
}
 
function hiddborder(obj)
{
 obj.className="output-body2";
} 
</script>

 

分享到：
| 制作细线表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3 input按钮样式代码.zip

    本资源"css3 input按钮样式代码.zip"正是利用这些特性来定制input类型的按钮样式，以增强页面的视觉效果和用户体验。 输入框(input)是HTML表单中的基本元素，通常用于用户输入数据。在传统HTML中，input按钮样式...

    html5-input样式

    本篇文章将深入探讨HTML5 `input`样式的相关知识点，以及如何利用这些特性创建出超棒的输入框UI设计概念和效果。 1. **新类型（Types）**：HTML5引入了多种新的输入类型，如`email`、`url`、`tel`、`date`、`...

    input标签样式

    /* 边框样式 */ } ``` 4. **添加过渡效果**：通过`transition`属性可以给按钮添加动态效果，如悬停时的颜色变化。 ```css label { transition: background-color 0.3s ease; /* 过渡效果 */ } label:hover ...

    input样式-input

    3. **边框样式**：通过 `style="border: 1 double #B4B4B4"` 设置了文件输入框的边框样式为双线型，颜色为灰色（#B4B4B4），宽度为1像素。 4. **hover效果**：通过 `onMouseOver` 和 `onMouseOut` 事件监听器设置了...

    很漂亮又实用的的Input框，支持CSS或者图片两种样式。

    1. **边框和内阴影**：使用`border`和`box-shadow`属性可以改变输入框的边框样式和添加深度感。 ```css input { border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } ``` 2. **圆角**：使用...

    输入框input样式，各种效果齐全

    本资源"输入框input样式，各种效果齐全"提供了一系列输入框样式的实例，旨在帮助开发者创建更加丰富多样的用户界面。 首先，我们要理解HTML中的`&lt;input&gt;`标签，它是创建输入框的基础。`&lt;input&gt;`标签是HTML的表单...

    css苹果手机去掉input样式

    在实际项目中，开发者可能会发现苹果手机上的输入框或按钮等元素与设计稿有所出入，比如边框、圆角、阴影等样式无法按照预期显示。这主要是因为苹果手机使用的Safari浏览器对这些元素有默认的样式设置，如果不进行...

    4种input元素滑块UI样式.zip

    "4种input元素滑块UI样式.zip"是一个包含多种滑块设计的资源包，旨在通过CSS3来提升网页的视觉效果，并利用JavaScript增强其功能。下面我们将详细探讨input元素滑块的实现方式以及相关技术知识点。 首先，`&lt;input ...

    自定义(滑动条)input[type="range"]样式 下载

    然而，浏览器默认的样式通常较为简单，缺乏吸引力。为了提升用户体验和界面美观度，我们可以自定义滑动条的样式。本教程将深入探讨如何使用HTML5、CSS3以及JavaScript来实现一个具有个性化外观的滑动条。 首先，...

    各种炫酷input样式

    这些样式可以包括但不限于：自定义边框、背景、占位符颜色、鼠标悬停效果、聚焦时的变化、输入验证提示等，以提升用户体验和网页的视觉吸引力。 描述中的“各种炫酷input样式”进一步强调了这个主题，意味着我们将...

    jquery.inputform(输入类型的文件的样式)

    1. **自定义样式**：`jquery.inputform`允许开发者自定义文件输入框的外观，比如边框、背景色、字体等，以匹配网页的整体风格。通过CSS类和JavaScript API，可以实现多样化的设计效果。 2. **预览功能**：对于图片...

    纯CSS美化input radio checkbox样式.zip

    本资源“纯CSS美化input radio checkbox样式.zip”提供了一种方法，通过纯CSS3技术对这些元素进行美化，提升网页界面的视觉效果。 首先，CSS3引入了新的选择器和属性，使得我们可以更加精确地控制元素的样式，包括...

    css input[type=file] 样式美化(input上传文件样式 )

    本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站的整体风格。 首先，我们来看一个简单的例子。在这个例子中，我们创建了两个不同的样式来展示如何自定义文件上传按钮： ...

    input file选择文件之后自动上传（样式自定义美化）

    "input file选择文件之后自动上传（样式自定义美化）"这个主题聚焦于一个常见但有时被忽视的用户体验改进点：如何在用户选择文件后立即启动上传，并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...

    Bootstrap tagsinput自定义标签插件

    3. **自定义样式**：Bootstrap tagsinput支持自定义样式，你可以根据项目需求调整标签的外观，如颜色、大小、边框样式等，以满足界面设计的一致性。 4. **事件处理**：插件提供了多种事件，如`add`、`remove`、`...

    input file样式修改以及图片预览删除功能详细概括（推荐）

    例如，可以使用CSS来设置图片的大小、颜色、边框和背景等样式。同时，也可以使用CSS来设置删除按钮的样式和布局。 知识点7：JavaScript事件监听器 在实现图片上传预览和删除功能时，需要使用JavaScript事件监听器...

    HTML5 INPUT文本框点击高亮特效.rar

    例如，我们可以通过设置`border`属性来改变输入框的边框，使用`box-shadow`来添加阴影效果，用`transition`来实现平滑的动画过渡。以下是一个简单的实现例子： ```css /* 设置默认样式 */ input[type="text"] { ...

    input输入框蓝光特效

    总的来说，实现"input输入框蓝光特效"涉及了前端开发中的CSS样式设计和JavaScript事件处理。通过结合这两者，我们可以创建出吸引用户的交互效果，提升网页的用户体验。同时，根据项目需求，我们还可以进行更高级的...

    文件上传input file简便美化方案(css)

    /* 边框样式 */ } .link-btn { width: 78px; height: 25px; display: inline-block; line-height: 25px; text-align: center; vertical-align: middle; background: url('./images/btn.png') 0 -110px; /* ...

Magicbox
Global site tag (gtag.js) - Google Analytics