CODEWITHSUNDEEP
htmlcssforms
Toby van Kempen
Toby van Kempen

Reputation: 1487

Remove borders from form and increase size

I would like to know how to increase the size of an input field in height, give it a small inset shadow on selection and to remove the borders of said form. My default form is here.

My default form in, if you prefer to stay on this page:

<form action="MAILTO:[email protected]" 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>

Upvotes: 0

Views: 97

Answers (5)

Sudheer
Sudheer

Reputation: 2985

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 ;
}

Upvotes: 0

Navin Rauniyar
Navin Rauniyar

Reputation: 10535

Try like this:

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

For what you are looking after is to use jQuery solution:

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

edited fiddle

Since you updated your question: you want to apply in input fields then use like this:

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

working fiddle

Upvotes: 0

AlexPrinceton
AlexPrinceton

Reputation: 1203

You should be using s for that text and try not using
remove glow and borders

borders: none;
outline: none;

input fields, you can specify a class in which to specify the desired properties like this

<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;
}

Upvotes: 0

JimboSlice
JimboSlice

Reputation: 91

It seems to me that with form you mean the input fields in the form. To modify the apperance of the input fields in your form you should use 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 */
}

Upvotes: 2

n1kkou
n1kkou

Reputation: 3142

You don't need to give it a fixed height value, as it will auto-increase based on the contents. Fiddle here: http://jsfiddle.net/3gV89/2/

Upvotes: 0

Related Questions