CODEWITHSUNDEEP
htmlcss
Jake
Jake

Reputation: 145

How to make input text border with CSS when it's OnFocus

it's possible to make it like this when you onfocus (onclick) on the input text. Any help would be appreciated.

Upvotes: 5

Views: 44581

Answers (6)

Ashok Emrys
Ashok Emrys

Reputation: 377

Use pseudo-class selector for various effects.

There are two possible methods using CSS

Method 1 --> if you need both hover and on focus effect then use border styling for the <input> element

here is a typical HTML and CSS for method 1, --> Jsfiddle view

HTML

<form class="form-style">
    <input class="input-style" type="text" name="some-name">
    <input class="input-style" type="text" name="some-name">
</form>

CSS

.form-style
{
    width: 250px;
    margin:auto;
    background-color: #d6d6d6;
    display:block;
}
.input-style
{
    width:200px;
    margin:auto;
    padding-left: 0px;
    padding-right: 0px;
    line-height: 2;
    border-width: 20px 25px;
    border-collapse: separate;
    border-style: solid;
    border-color: #d6d6d6;
    display: block;

}
input.input-style:focus, input.input-style:hover
{
    border-color: #3399FF;
}

Method 2 -> if you need just a hover effect then enclose the <input> element in a <div> and add :hover effect to it, or you can use the method 1 :hover and remove the :focus selector

here is a typical HTML and CSS for method 2, --> Jsfiddle view

HTML

<form class="form-style">
    <div class="input-style">
        <input type="text" name="some-name">
    </div>
    <div class="input-style">
        <input type="text" name="some-name">
    </div>
</form>

CSS

.form-style
{
    width:250px;
    margin:auto;
    display:block;
}
.input-style
{
    width: 200px;
    background-color: #d6d6d6;
    padding:20px 25px 20px 25px;
    display: block;

}

.input-style input
{
    width:inherit;
    line-height: 2;
    display: block;
}
.input-style:hover
{
    background-color: #3399FF;
}

My advice -> just use on focus effect, because on hover will highlight the <input> on which the mouse is over even if you you are typing (on focus) in another <input>

Upvotes: 0

Maria
Maria

Reputation: 548

I think this CSS trick can be used rarely in real cases, but it is funny, that we can make this effect with box-shadows.

http://jsfiddle.net/XSpwg/

HTML: 

<div>
<form>
   <input></input>
   <input></input>
   <input></input>
</form>
</div>

CSS: 

div {
    background-color: lightgrey;
    width: 80%;
    max-width: 400px;
    overflow: hidden;
    padding: 5px;
}

input {
    margin: 2em 0.5em;
    display: block;
    border: solid 2px lightblue;
    outline: none;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
}

input:focus {
    box-shadow: 180px 227px 0 200px lightgrey,
                180px 195px 0 200px blue;
}

Upvotes: 0

Nabil Kadimi
Nabil Kadimi

Reputation: 10384

You can make use of outline and :focus, these are compatible with major browsers.

HTML

<input type="text" class="inp" />
<br>
<input type="text" class="inp" />

CSS

.inp{
    border:solid 2px gray;    
    margin: 20px 5px;
    outline:solid 10px silver;
}
.inp:focus{
    outline:solid 10px red;
}

Preview on JSFiddle

Upvotes: 12

MikesBarto2002
MikesBarto2002

Reputation: 175

I think you would have to wrap each input in a div and give that div a background color when it has focus using JavaScript. Here's a version in jQuery...

$(document).ready(function() {
    $('input').on('focus', function() {
        $(this).parent().css('background-color', 'blue');
    });
});

Upvotes: 0

ygesher
ygesher

Reputation: 1161

You can wrap the input with an anchor tag, and set it to change background-color onfocus:

<a class='focused'><input /></a>

with CSS:

.focused:hover{ background-color:blue; }

or, if you want it to change when the input is active, you need to use javascript/jQuery.

Upvotes: 0

codeMan
codeMan

Reputation: 5758

You can do it like this : 

input:focus
{
    background-color:blue;//*
}

*this is just a example to change the background color.Do any thing that u desire here

Take look at complete example here.

Upvotes: 0

Related Questions