CSS 翻译系列_(使用简单CSS技巧增强你的Input输入域)

原文地址 http://www.jankoatwarpspeed.com/post/2008/07/27/Enhance-your-input-fields-with-simple-CSS-tricks.aspx

 

第一次翻译技术类型的文章，措辞应该会有不当之处，还请各位看客们批评的批评，指正的指正，小弟还望各位不吝赐教。

发现国内技术类书籍翻译存在一个误区，或许称不上误区，而是能力不足，不少优秀的技术书籍一旦翻译为中文，便会引来唏嘘声一片，大家不妨上豆瓣看看。

 

依小弟愚见，之所以出现这类现象，大致可以分为两类情况，一是译者英语功底不足，专业词汇量不足，这类翻译书籍基本上是在糟蹋人，侮辱了作者又来侮辱读者，二是译者水平是足够了，但是译者的文学水平不敢恭维，语句牵强，难于理解，

 

说了这麽多，感觉是给自己下了一个套，一旦下文的翻译不能满足各位的品味，那就有些搬起石头砸自己的脚的尴尬了.

 

使用简单CSS技巧增强你的Input输入域

我们将尝试去构建一个高效且好看的web表单。但总会有一个新的挑战，如果读过我以前关于如何构建一个像样表单的文章，你应该注意到存在如此多的细节，Label的布置，文本高亮或者元素对齐。但是，通过使用一些简单的CSS技巧，能够使得一个普通、无趣的web表单更加有趣。

 

你将看到的例子是你每天都用到的：Blog评论表单。你将如何增强你的表单呢？

 

准备：

 

 <div id="inputArea">
        <label for="txtName">
            Name</label>
        <input id="Text16" type="text" />
        <label for="txtEmail">
            Email</label>
        <input id="Text17" type="text" />
        <label for="txtWebsite">
            Website</label>
        <input id="Text18" type="text" />
        <label for="txtComment">
            Comment</label>
        <textarea id="Textarea6" rows="4" cols="30"></textarea></div>

 

...添加Borders

 

至少你能够做的是添加Borders和Padding到你的表单域。以上的两个例子展示了你能够设置border的颜色去匹配你的颜色模式，添加padding到你的输入域也是一个很好的实践。这将使表单看起来更加清晰。该示例中设置input和textarea 4px

 

#inputArea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    background-color: #d6e5f4;
    padding: 10px;
}

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
}

 让我们快速的回顾以上代码，这是为第二个示例所写的代码，整个表单是浅蓝色背景#d6e5f4和10px的padding。每个input元素以block展示，这样确保标签布置在输入域之上。现在，这很简单。但是你可以做更多。

 

...添加背景

 

你也能够想下面例子中一样添加一些纯色的背景

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de; 
    width: 300px;
    background-color: #EDF2F7;
}

或者你也能够添加一些渐变色为背景，以下示例展示了灰和蓝色渐变。

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-image: url( 'blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
}

这个技巧简单并且仅包括最后的三条代码，增加渐变图片作为背景，设置它水平重复(repeat-x)，并且将它放置在field的顶端。简单吧

...添加一些行为

 

非常简单，使得激活的输入域与其它不同，如下图所示。

 

 

#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}

就像你看到的，代码非常简单。每一次当field得到焦点时，一个不同的样式将会被应用，它改变了背景和边框。但是稍等！它不能在IE上工作！！为此我们不得不使用js（或者jquery）寻求帮助。好的，你知道我在开玩笑。

#inputArea input, #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    width: 300px;
}

除了背景和边框，我们将为输入域和文本框定义所有的样式。

 

.activeField
{
        background-image: none;
        background-color: #ffffff;
        border: solid 1px #33677F;
}
.idle
{
    border: solid 1px #85b1de;
    background-image: url( 'blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
}

接下来，我们将定义两个类，他们将会设置idle和active状态下的样式，
这里使用jquery，

$(document).ready(function(){
    $("input, textarea").addClass("idle");
        $("input, textarea").focus(function(){
            $(this).addClass("activeField").removeClass("idle");
    }).blur(function(){
            $(this).removeClass("activeField").addClass("idle");
    });
});

现在可以工作在IE上了，当然，它也可以工作在火狐上，这些代码做了三件事情：初始化，添加“idle”类到所有的input和为focus和blue事件定义的行为可能并不完美，但是可以工作，

就这样了，还有什么你可以做呢？

 

试验

使用不同的颜色，边框大小以及背景。你可以添加鼠标悬停（hover）功能。尝试并且摆脱乏味无趣的表单吧！