Skip to content

Instantly share code, notes, and snippets.

@plugn

plugn/grid-row.select.html

Last active December 23, 2015 21:48
Show Gist options
  • Save plugn/6698368 to your computer and use it in GitHub Desktop.
Save plugn/6698368 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grid-row.select.html
<!doctype html>
<html>
<head>
<title>grid row with select</title>
<style type="text/css">
.content {
padding: 10px 20px 15px 20px;
}
.grid-row {
position: relative;
margin: 0;
padding: 0;
clear: both;
list-style: none;
}
.grid-row__col {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
}
.grid-row__field {
width: 100%;
font-size: 18px;
border: 1px solid #ccced0;
border-radius: 4px;
box-shadow: 0px 1px 0px #ffffff;
margin: 5px -10px;
padding: 5px 9px;
}
.grid-row__field__select {
margin: 5px 0 0 0;
height: 33px !important;
}
.grid-row__col__right {
width: 30%;
position: absolute;
right: -10px;
}
.grid-row__col__left {
width: 70%;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="content">
<form>
<div class="grid-row">
<div class="grid-row__col grid-row__col__left">
<input class="grid-row__field">
</div>
<div class="grid-row__col grid-row__col__right">
<select class="grid-row__field grid-row__field__select">
<option value="mail.ru">mail.ru</option>
<option value="bk.ru">bk.ru</option>
<option value="inbox.ru">inbox.ru</option>
<option value="list.ru">list.ru</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment