Wie ändere ich die Breite und halte die Dinge rtl?

Question

Hier ist mein Code:

$(document).on('focus', '.search_input',function(){ 
 
    $(this).animate({'width':'88%'}); 
 
});

.search_box{ 
 
    margin: 10px 30px; 
 
    direction: rtl; 
 
    
 
} 
 

 
.search_icon{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    margin-top: 1px; 
 
    padding: 0px 3px; 
 
    border-left: 1px solid; 
 
} 
 

 
.search_input{ 
 
    padding-right: 55px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="search_box"> 
 
    <div class="search_icon">search</div> <!-- in reality it is a magnifier icon --> 
 
    <input class="search_input" type="text" /> 
 
</div>

Alles, was ich die Position des Eingangs tun möchte, ist zu ändern. Beachtet, dass das Wort von search immer noch auf der rechten Seite der Eingabe sein sollte.

Mit anderen Worten, der Eingang sollte auf der linken Seite der Seite sein und sein width sollte auf der rechten Seite erhöht werden. wieder, immer das Wort von search und die Richtung des Eingangs sollte auf der rechten Seite (rtl) des Eingangs sein.

Wie kann ich das tun?

Answer 1

ich ein bisschen Ihr Snippet gezwickt haben, ist es das, was Sie suchen?

Sie haben direction: rtl auf die ganze .search_box Div angewendet, deshalb war alles auf der rechten Seite.

$(document).on('focus', '.search_input',function(){ 
 
    $(this).animate({'width':'88%'}); 
 
});

.search_box{ 
 
    margin: 10px 30px; 
 
} 
 

 
.search_icon{ 
 
    display: inline-block; 
 
    margin-top: 1px; 
 
    margin-left: -55px; 
 
    padding: 0px 3px; 
 
    border-left: 1px solid; 
 
} 
 

 
.search_input{ 
 
    padding-right: 55px; 
 
    direction: rtl; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="search_box"> 
 
    <input class="search_input" type="text" /> 
 
    <div class="search_icon">search</div> 
 
</div>

Answer 2

können Sie versuchen, durch das Hinzufügen text-align:left Eigenschaft der Klasse search_box

$(document).on('focus', '.search_input', function() { 
 
    $(this).animate({ 
 
    'width': '88%' 
 
    }); 
 
});

.search_box { 
 
    margin: 10px 30px; 
 
    direction: rtl; 
 
    text-align:left 
 
} 
 

 
.search_icon { 
 
    display: inline-block; 
 
    position: absolute; 
 
    margin-top: 1px; 
 
    padding: 0px 3px; 
 
    border-left: 1px solid; 
 
} 
 

 
.search_input { 
 
    padding-right: 55px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="search_box"> 
 
<div class="search_icon">search</div> 
 
<input class="search_input" type="text" /> 
 
    
 
    <!-- in reality it is a magnifier icon --> 
 
    
 
</div>