The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS problem when using type=password , chrome, bootstrap

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #161898

    hi – on chrome osx

    I’m using bootstrap and I have 2 buttons NEXT TO EACH OTHER on header; login and sign up.
    they look fine, each of them display different divs when mouse hover.

    I’m using this code to hide/show divs – just because transition animation wouldn’t work when I use display:none, block;

        opacity: 0;
        height: 0;
        overflow: hidden;

    Each div has


    form> inside.
    Everything is fine except whenever I use an input type=password in a form tag, anywhere in the page, I get problem.

    One button is under another one when I have that input in the page.

    For now I use type=passwordInput and -webkit-text-security: disc; instead, but still I’m trying to figure out why I have this problem.

    Even if I remove all of forms and input inside those hidden divs, I still would get problem when I use an input (type=password) somewhere else in the page.

    and it is totally working on safari and firefox.

    Anyone faced this problem before?

    —– my opinion —-

    I think there is something wrong with divs as I don’t hide them by using display:none;

    but still why using another password input anywhere in the page would cause this problem?


    here is another thing ;

    I copy the div class -from css file- delete everything but keep position:absolute;

    and add the style inside header like this>

    <style type="text/css">
    .hiddenDiv {
            position: absolute;

    and it works????? what kind of weird situation is this? I have the same thing in style.css .

    It seems I m just gonna have that style inside header till I find a solution.


    just because transition animation wouldn’t work when I use display:none, block;

    You can’t transition display:block/none…as there are no intermediate steps between display:none and display:block.

    I reduced case Codepen would be of more help.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.