1、按钮的margin-left:-10px这样的负值。或者学度娘,取消input边框另作。
2、css里面font-size:16pxfont-family:"Times New Roman",Georgia,Serif这样。
3、可以设置input的type为image,然后加背景图片。
给出一个例子
<!DOCTYPE HTML><html lang="en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div class="search">
<input id="search" type="text" autofocus="autofocus" >
<div class="submit">搜索</div>
</div>
<style type="text/css">
.search{width:300pxoverflow: hiddenborder:1px solid #dddfont-size:16pxheight:2emline-height: 2em}
.search:hover{border:1px solid #00af60}
.search input#search{padding-left: 10pxoutline: nonewidth:230pxborder:0}
.search .submit{cursor:pointerfloat: rightpadding:0 10pxcolor: #00af60border-left: 1px solid #ddd}
.search:hover .submit{background: #00af60color:#FFFborder:0/*background:url(1.jpg)*/}
</style>
<script type="text/javascript">
$(function(){
$('.search').hover(function(){$('#search')[0].focus()})//
$('.search .submit').click(function(){
alert("在此检查然后js提交")
})
})
</script>
</body>
</html>
CSS只是定义样式 的,表单在CSS里怎么写问的不对。我觉得你可能问的是如果定义表单里的样式吧?单说一个真实姓名:<input type="text" name="yhm" id="yhm" />这样写的话是不是觉得不好看?你再看看这个:
<input type="text" name="yhm" id="yhm" style="background-color:#009933border:10px #666666 solid" />
是不是变样了?再看看这样
<style type="text/css">
<!--
#yhm {background-color:#009933border:10px #666666 solid
}
-->
</style>
<input type="text" name="yhm" id="yhm" />
和上面的一样吧? #yhm {}指的就是ID="YHM"
再试试这样
<style type="text/css">
<!--
input {background-color:#009933border:10px #666666 solid
}
-->
</style>
<input type="text" name="yhm" id="yhm" />
和上面的一样吧? input指的是INPUT标签,如果用了这样的定义,你里面所有的INPUT标签都会变成这样的。
常用的还有一个
<style type="text/css">
<!--
.YHM {background-color:#009933border:10px #666666 solid
}
-->
</style>
<input type="text" name="yhm" id="yhm" class="YHM" />
和上面的还是一样的。
但这个的作用范围就是你指定了class="YHM"的标签