CODEWITHSUNDEEP
htmlcss
user2953119
user2953119

Reputation:

hover and focus pseudo-classes action

I'm experimenting with css and I'm trying to add a dynamic pseudo-class in my selector. Here is the HTML-markup snippet.

<div id="child">
    <input type="text" id="text"/>
</div>

and it's corresponding css-style

input[type="text"]{
    width: 150px;
    height: 25px;
}
input[type="text"]:hover, input[type="text"]:focus{
    border: 1px solid grey;
}
#child{
    padding: 5px;
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

Here is the JSFIDDLE example. So when the mouse hovers over the text element the size of the text element is reduced as follows:

enter image description here

enter image description here

Would anyone know why this reduction in size is occurring?

Upvotes: 2

Views: 88

Answers (2)

vittore
vittore

Reputation: 17579

That is because of two things outline and pseudo 3d default border of input. Add

input[type="text"]{
    border: 1px solid aqua;
}

input[type="text"]:focus{
   outline:none;
}

Upvotes: 0

Zword
Zword

Reputation: 6793

Now in your code what is happening is that you have set the input fields width and height to 150px and 25px respectively.Now when you add 1px border to it it will reduce the inside(white) portion of the input field to maintain the width and height as mentioned(150px and 25px). To solve this you can add 2px to both width and height on hover.Fiddle : http://jsfiddle.net/z78BN/6

input[type="text"]:hover, input[type="text"]:focus{
   width: 152px;
   height: 27px;
   border: 1px solid grey;
}

Upvotes: 1

Related Questions