Question

我想知道如何在高度上增加输入字段的大小，在选择时给它一个小的插入阴影并删除所述表单的边框。我的默认表单是here。

我的默认表单，如果您希望留在此页面上：

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Answer 1

在我看来，表单中的意思是表单中的输入字段。要修改表单中输入字段的外观，您应该使用css。 E.g;

input { /* Select what you want to style */
 width: 200px; /* This modifies the width of the selected element. */
 height: 40px; /* This modifies the height */
 border: none; /* This removes the borders */
}

/**
 * To modify the input apperance on selection we need to use the focus psuedo selector.
 */
input:focus {
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125) inset; /* This adds an inner shadow on the element */
}

Answer 2

试试这样：

form{
  height: 120%;/*apply in pixels as you need*/
  border: 5px inset #f00;
}

您正在寻找的是使用jQuery解决方案：

$('input').on('focus',function(){
  $(this).closest('form').css({border:'5px inset #f00'});
});

edited fiddle

由于您更新了问题：您想要在输入字段中应用，请使用如下：

input:focus{
  border: 5px inset #f00;
}

working fiddle

Answer 3

您不需要为其提供固定的height值，因为它会根据内容自动增加。在这里小提琴：http://jsfiddle.net/3gV89/2/

Answer 4

您应该使用s作为该文本，并尝试不使用
删除发光和边框

borders: none;
outline: none;

输入字段，您可以指定一个类来指定所需的属性，例如

<input type="text" class="input-field" name="mail" value="your email">

.input-field {
    border: none;
    outline: none;
    -webkit-box-shadow: inset 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    width: 250px;
    height: 24px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

Answer 5

input:focus {
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
    height: 120%;
    border:0px ;
}

从表单中删除边框并增加大小

5 个答案: