Нечетные переходы CSS

Question

Когда я пытаюсь создать переход, стили исчезают в элементах, а не только при зависании (пример). Я действительно не знаю, в чем проблема, и не знаю, с чего начать искать это.

Пример:

input[type='text'] { 
    transition:.15s all; 
    -webkit-transition:.15s all; 
    -moz-transition:.15s all; 
    border: 1px solid #DEDEDE; 
    border-radius: 5px; 
    color: #545454; 
    font-size: 15px; 
    padding: 4px; 
    margin-bottom: 6px; 
} 

Размер, расширяется, когда я загрузить страницу, вместе с границей. Какие-нибудь идеи о том, в чем проблема?

Answer 1

Проблема заключается в том, что вы задали переход по умолчанию. Если вы делаете это так:

input[type='text'] { 
    border: 1px solid #DEDEDE; 
    border-radius: 5px; 
    color: #545454; 
    font-size: 15px; 
    padding: 4px; 
    margin-bottom: 6px; 
} 

input[type='text']:hover { 
    transition:.15s all; 
    -webkit-transition:.15s all; 
    -moz-transition:.15s all; 
    font-size: 17px; 
    color: black; 
} 

Это только активный переход при наведении на вход.