CODEWITHSUNDEEP
htmlcssborder
user937450
user937450

Reputation: 733

Change input text border color without changing its height

Let's say I have a default text input without any CSS

<input type="text" />

I want to change its border color to red so I add an style

<input type="text" style="border-color:red" />

After that the border is red, but its size is 2px. If I change the border to 1px the height of the input will be smaller than a default one.

How can I change my border to 1px and assure that the true height of the input (including the border) is the same as an default one?

Upvotes: 18

Views: 168897

Answers (6)

Ivan M
Ivan M

Reputation: 1

This worked for me in a similar situation:

input:focus { 
   outline-offset: -2px; // negative value to 'squeeze' it inside 
   outline-color: orangered; // new desired color

}

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6736

Try this

<input type="text"/>

It will display same in all cross browser like mozilla, chrome and internet explorer.

<style>
    input{
       border:2px solid #FF0000;
    }
</style>

Dont add style inline because its not good practise, use class to add style for your input box.

Upvotes: 10

Mayur Patil
Mayur Patil

Reputation: 303

Is this what you are looking for.

$("input.address_field").on('click', function(){  
     $(this).css('border', '2px solid red');
});

Upvotes: 1

Tarun
Tarun

Reputation: 1089

This css solution worked for me:

input:active,
input:focus {
    border: 1px solid #red
}

input:active,
input:focus {
    padding: 2px solid #red /*for firefox and chrome*/
}

/* .ie is a class you would need to set at the html root level */
.ie input:active,
.ie input:focus {
    padding: 3px solid #red /* IE needs 1px extra padding*/
}

I understand it is not necessary on FF and Chrome, but IE needs it. And there are circumstances when you need it.

Upvotes: 1

Atif Azad
Atif Azad

Reputation: 527

use this, it won't effect height:

<input type="text" style="border:1px solid #ff0000" />

Upvotes: 32

Michael Sazonov
Michael Sazonov

Reputation: 1533

Set a transparent border and then change it:

.default{
border: 2px solid transparent;
}

.new{
border: 2px solid red;
}

Upvotes: 3

Related Questions