为input输入框添加圆角并去除阴影

<input type="text" name="bianhao" value="" placeholder="请输入商品编号"  maxlength="10" size="10" style="width:105px; margin:0px 0px 0px 12px;height:22px;border-radius:4px; border:1px solid #DBDBDB ;"/>

border-radius:4px;是为div添加圆角，同样适用于input输入框。添加完圆角后input输入框中可能会有阴影，为input输入框重新添加border就可以去除阴影。

时间： 2024-10-20 17:35:13

为input输入框添加圆角并去除阴影的相关文章

为Input输入框添加圆角并去除阴影去除获得焦点时方角样式

目录 1.为Input输入框添加圆角并去除阴影 2.去除获得焦点时方角样式内容 1.为Input输入框添加圆角并去除阴影 1.1 border-radius不同浏览器下兼容设置: .boder-radius{ -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome.safari等) -moz-border-radius:6px;//适配firefox浏览器 -ms-border-radius:6px;//适配IE浏览器 -o-border-rad

input输入框添加内部图标

有可能在制作网页的过程中遇到各种美化表单设计,这次我们来试着做一个demo 将input输入框添加内部图标话不多说,看一下最终效果我们的思路是,在一个div中,加入一个div和一个input标签,小div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 => 盒子定长定宽,不管有没有padding,border,margin,始终就是这么大,影响的只会是里面的元素. 左侧的div给border,也要给border-radius,右边的

如何在移动web模仿客户端给input输入框添加自定义清除按钮

项目有个需求就是在input输入框添加清除按钮,网上查找资料加上自己琢磨终于弄出来了. 灵感来自于 http://www.zhangxinxu.com/wordpress/?p=4077 由于项目已经上线给为了减少改动就改为通过js全局控制的方式,就不改html了. css部分: 1 /*输入框清除按钮*/ 2 .iss-close{ 3 position: absolute; 4 top: 0; 5 color: #ccc!important; 6 display: none; 7 curso

UWP Button添加圆角阴影（三）

原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx()方法,效率远远不如使用CompositionAnimation. Composition对象的基类CompositionObject拥有一个属性叫ImplicitAnimations,可以通过他实现累死css的transition的效果,也就是对应属性修改的时候,平滑的过渡过去. 可以从DropSh

UWP Button添加圆角阴影（二）

原文:UWP Button添加圆角阴影(二) 阴影对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolkit.Uwp.UI.Controls这个Nuget包就可以使用啦. 直接把阴影套在咱们的圆角Button外面呢,会出现圆角的Button映出直角的阴影的丑陋状况.对于这种情况肯定是有处理方式的. 看DropShadowPanel的源码,对Content的特殊类型做了处理.下面我详细的说下. Compo

去除Input输入框中边框的方式

我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上时,需要用 outline:medium;来消除边框,具体代码如下 .table_box2{ height: 30px; width: 180px; border: none; float: left; zoom:1; outline: medium; 需特别注意点一点,在这里尽量不要使用borde

给input元素添加float. 去除IE6 下input的空隙

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box{ 8 width: 200px; 9 border: 1px solid #000000; 10 background-color: red; 11 } 12 .box input{ 13 border: 0; 1

input输入框的border-radius属性在IE8下的完美兼容

在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radius是css3属性,IE8不兼容!!!那么问题来了,怎样在IE8下完美兼容呢? 网上有很多关于css3属性在IE8下兼容的方法,需要引入PIE.htc这个文件,相信很容易搜到并下载该文件,但是用上position:relative;behavoior:url(PIE.htc);后发现圆角是实现了,但

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum