Skip to content

Instantly share code, notes, and snippets.

@vigneshrajarr

vigneshrajarr/ComboBox.html

Last active May 24, 2019 17:01
Show Gist options
  • Save vigneshrajarr/4a89d6428e723cdcfb7433a0f4c756f3 to your computer and use it in GitHub Desktop.
Save vigneshrajarr/4a89d6428e723cdcfb7433a0f4c756f3 to your computer and use it in GitHub Desktop.
Download ZIP
Creating a combo box with select and input text box elements besides one another - for StackOverflow question - https://stackoverflow.com/questions/28910272/html-and-css-dropdown-box-with-textbox-beside-it
Raw
ComboBox.html
<html>
<head>
<title>Select and Input box Combo from Scratch</title>
<!--
A combo of select and input box built from scratch. Tested in Chrome, Firefox, Safari.
-->
<style>
*
{
box-sizing: border-box;
}
.inputgroup
{
display: inline-flex;
height: 30px;
border: 1px solid black;
border-radius: 5px;
}
.inputelem
{
float: left;
}
select
{
height: 30px;
width: 100px;
border: 1px solid #000;
border-radius: 4px 0 0 4px;
margin-left: -1px;
margin-top: -1px;
padding-left: 10px;
-webkit-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
}
input
{
width: 200px;
height: 30px;
border: 1px solid #000;
border-radius: 0 4px 4px 0;
margin-left: -1px;
margin-top: -1px;
border-right: 0px;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="inputgroup">
<div class="inputelem">
<select>
<option value="google">Google</option>
<option value="microsoft">Microsoft</option>
<option value="yahoo">Yahoo</option>
<option value="zoho">Zoho</option>
</select>
</div>
<div class="inputelem">
<input type="text">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment