locked
How to make give a div functions after a textbox is on focus? RRS feed

  • Question

  • User-1789840570 posted

    I have a div with icon, and a textbox. 

    this is the code:

         <div id="Backtb1">
          <i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
         </div>
         <asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server"  placeholder="Username" ></asp:TextBox>
                

    and css: 

    TextButtons {
        ;
        border: none;
    
        border-radius: 4px;
        width: 130%;
        height: 30px;
    
        font-family: Calibri;
        font-size: 120%;
    
        font-weight: bold;
    
        opacity: 0.6;
         border: 1px solid #888;
        background-color: #888;
        margin-bottom: 2px;
    
      
      -webkit-transition: width .35s ease-in-out;
      transition: width .35s ease-in-out;
    
    
    }
    .TextButtons:focus{
        width: 115%;
        outline:0;
    
        border: 1px solid;
        border-color: orange;
        opacity: 1;
    }
    
    #Backtb1 {
        ;
    
        top:0;
        left:0;
        opacity: 0;
        width: 130%;
        color: white;
    }
        #Backtb1:focus {
            background-color: orange;
            opacity:1;
        }
    #envelope {
        ;
        
        right: 5px;
        top: 7px;
     }

    as you can see the Backtb1 opacity is 0. but when you focus on the textbox 1.  I want its opacity to change to 1 and change color.

    how can I make the connection between those two?

    Sunday, November 13, 2016 7:45 PM

All replies

  • User-1838255255 posted

    Hi berGEX,

    According to your description, I make a sample, here is my test code, you can use a:focus+b{change style}, also you can use jQuery's focus and blur events fire function.

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <style>
            #Backtb1 {
                opacity: 0;
            }
            #TextBox1:focus+ #Backtb1{
                opacity: 1;
                color: orange;
            }
        </style>
        <script>
            $(function () {
                $("#TextBox1").focus(function () {
                    $("#Backtb1").css("opacity", "1");
                    $("#Backtb1").css("color", "orange");
                });
                $("#TextBox1").blur(function () {
                    $("#Backtb1").css("opacity", "0");
                    $("#Backtb1").css("color", "black");
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username"></asp:TextBox>
            <div id="Backtb1">
                <i class="fa fa-envelope" id="envelope" aria-hidden="true">3232324</i>
            </div>
        </form>
    </body>

    Result:

    Best Regards,

    Eric Du

    Monday, November 14, 2016 6:51 AM
  • User527778624 posted

    Hi,

    CSS not allows successors to manipulate predecessors, here textbox can't manipulate previous sibling div.

    You have 2 options:

    1>since div is absolute in position, move the div to below of textbox, so that allows CSS to be applied.

    check the code and demo here: http://jsbin.com/kajilurugi/edit?html,css,output

    2>You can use :before to add content before textbox, check the code and demo:

    http://jsfiddle.net/4Rakx/1218/

    Monday, November 14, 2016 11:51 AM