managing the orientation of an input box is expanded within HTML

Question

managing the orientation of an input box is expanded within HTML

I'm currently reviewing the HTML and CSS code for a website at http://preview.python.org/ but there are some things I don't quite grasp. One thing that caught my eye is the search-box - how did they achieve the icon-search feature? I doubt it's just a simple image file like a jpg or png, so how exactly was it created? Another interesting element is how the input box extends from right to left when you focus on it. My tests with other input boxes didn't yield the same result. Can someone shed some light on how this effect is achieved? Any help would be greatly appreciated.

html css

Answer 1

Answer №1

To achieve this effect, you can utilize the CSS transition property. Take a look at the sample code provided below:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script>
    function resetWidth(){
      console.log("function called");
        document.getElementById("inputBox").style.width="100px";
    }
  </script>
</head>
<body onmousedown="">
  <input type="text" class="inputBox" id="inputBox" onchange="resetWidth()">
</body>
</html>

CSS:

input {
width: 100%;
padding: .65em;
margin-bottom: .875em;
border: 1px solid #caccce;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
  width:100px;  
    float:right;
    position:relative;

}

.inputBox{
  -webkit-transition: width .3s ease-in-out; 
  -moz-transition:width .3s ease-in-out; 
  -o-transition: width .3s ease-in-out;  
  transition:width .3s ease-in-out;  

}
#inputBox:focus
{ 
width:200px;  
}

Live Demo For Further Clarification

Answer 2

To achieve this effect, you can utilize the CSS transition property. Take a look at the sample code provided below:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script>
    function resetWidth(){
      console.log("function called");
        document.getElementById("inputBox").style.width="100px";
    }
  </script>
</head>
<body onmousedown="">
  <input type="text" class="inputBox" id="inputBox" onchange="resetWidth()">
</body>
</html>

CSS:

input {
width: 100%;
padding: .65em;
margin-bottom: .875em;
border: 1px solid #caccce;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
  width:100px;  
    float:right;
    position:relative;

}

.inputBox{
  -webkit-transition: width .3s ease-in-out; 
  -moz-transition:width .3s ease-in-out; 
  -o-transition: width .3s ease-in-out;  
  transition:width .3s ease-in-out;  

}
#inputBox:focus
{ 
width:200px;  
}

Live Demo For Further Clarification

managing the orientation of an input box is expanded within HTML

Answer №1

Similar questions

"Enhancing user experience with jQuery hover effects on table

After filling out the form, the user's entered information is instantly shown on the same page

The button appears to be unresponsive following the addition of jQuery 1.9.1

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

How can I customize the appearance of the container and items in a dropdown <select> menu?

Is the CSS 'position: absolute' applied to the element immediately following the body tag

Troubleshooting problem with iPhone X responsiveness

Checking the validity of a form input in HTML before submission

Tips for accessing images in Angular 24 lazy loaded modules

The option to clear searches is missing from the iOS interface

What is the best way to ensure that an image perfectly fits within a div container?

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

Customizing the appearance of default UI elements in asp.net

ng-disabled directive not functioning as expected

How can I locate and modify a particular cell within an HTML table using just JavaScript?

Are there CSS styles that target specific elements?

Expanding section beneath a Row in a Table (Semantic UI React)

Retrieve the text from a string resource in Android while preserving HTML tags

Instructions on utilizing clean-css with Node.js to process incoming requests

Is it possible to include a link to an external page and execute a JavaScript function on that page simultaneously