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>
         <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;
        width: 115%;
        border: 1px solid;
        border-color: orange;
        opacity: 1;
    #Backtb1 {
        opacity: 0;
        width: 130%;
        color: white;
        #Backtb1:focus {
            background-color: orange;
    #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">
        <script src="Scripts/jquery-1.10.2.js"></script>
            #Backtb1 {
                opacity: 0;
            #TextBox1:focus+ #Backtb1{
                opacity: 1;
                color: orange;
            $(function () {
                $("#TextBox1").focus(function () {
                    $("#Backtb1").css("opacity", "1");
                    $("#Backtb1").css("color", "orange");
                $("#TextBox1").blur(function () {
                    $("#Backtb1").css("opacity", "0");
                    $("#Backtb1").css("color", "black");
        <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>


    Best Regards,

    Eric Du

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


    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:


    Monday, November 14, 2016 11:51 AM