I need to create search form like on the picture but I don't know how to put inside tab with dropdown list. Currently I have such a code
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</form>
You could do it like this, but you would need to style it the way that you wan't it.
I added a <select> tag and a <input type="submit" value="Search"> button
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
<select name="" id="">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
<input type="submit" value="Search">
</form>
Just add the images in your styling in sudo elements(:after, :before).
#iconified {
padding: 10px;
width: 56%;
border-radius: 7px;
border: 2px solid #DDDDDD;
outline: none;
}
input[type="submit"] {
position: absolute;
left: 308px;
top: 16px;
}
select {
position: absolute;
left: 225px;
top: 17px;
background: none;
border: 1px solid #DDD;
border-top: 0;
border-bottom: 0;
outline: none;
}
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder="search"/>
<select name="" id="">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
<input type="submit" value="Search">
</form>
Try the below sample
::-webkit-input-placeholder {
text-align: left;
padding: 35% 35% 0 15%;
}
:-moz-placeholder { /* Firefox 18- */
text-align: left;
}
::-moz-placeholder { /* Firefox 19+ */
text-align: left;
}
:-ms-input-placeholder {
text-align: center;
}
#iconified {
/*padding: 10px;*/
width: 24%;
border-radius: 7px;
border: 2px solid #DDDDDD;
outline: none;
}
input[type = "text"] {
background: url("http://png.findicons.com/files/icons/1389/g5_system/32/toolbar_find.png") top left no-repeat;
background-size: 10%;
background-position: 4px 8px;
height: 30px;
padding-right: 30px;
}
input[type="submit"] {
position: absolute;
left: 340px;
top: 16px;
background: url(https://cdn2.iconfinder.com/data/icons/arrows-and-universal-actions-icon-set/256/arrow_right_circle-32.png) no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
/* height: 20px; */
padding-bottom: 2px;
width: 82px;
background-size: 20px 19px;
border: none;
}
select {
position: absolute;
left: 225px;
top: 17px;
background: none;
border: 1px solid #DDD;
border-top: 0;
border-bottom: 0;
outline: none;
color: #DDDDDD;
}
<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder="Search" />
<select name="" id="slctOption">
<option selected="selected" value="0">All Categories</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="submit" value="">
</form>
This link will help you search-bar-dropdown
Related
I want to have a border size for the below html code but I am unable to do so and have tried with its attribute's. pls if I can have the css for it.
<div class="navbar1">
<div class="select-div">
<select name="country" class="form-control" id="country">
<option value="USA" label="United States">United States</option>
<option value="CN" label="Canada">Canada</option>
</select>
<select name="language" class="form-control" id="language">
<option value="USA" label="English">English</option>
<option value="Mexico" label="Spanish">Spanish</option>
</select>
<select name="search" class="form-control" id="search">
<option value="search" label="Search">Search</option>
</select>
</div>
</div>
I tried writing CSS using the class,label,id attributes but I am unable to design it the way it's in the image attached
If i understand you correctly, you want to make select option like in the image.
if that's the case, Kindly check some changes below - if that helps.
I have added the icon using pseudo element ::after
select{
padding: 5px 30px 5px 5px;
appearance: none;
width: 150px;
border: 1px solid #bebebe;
}
.select,
.select-dark{
position: relative;
}
.select::after {
content: '\25BC';
position: absolute;
top: 5px;
right: 10px;
color: #6BBDD7;
cursor:pointer;
pointer-events:none;
transition:.25s all ease;
}
.select-dark::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
background-color: #117CC0;
color: #fff;
cursor: pointer;
pointer-events: none;
transition: .25s all ease;
padding: 6px 6px 3px
}
<div class="select-div" style="display: flex;gap:20px">
<div class="select">
<select name="country" class="form-control" id="country">
<option value="USA" label="United States">United States</option>
<option value="CN" label="Canada">Canada</option>
</select>
</div>
<div class="select">
<select name="language" class="form-control" id="language">
<option value="USA" label="English">English</option>
<option value="Mexico" label="Spanish">Spanish</option>
</select>
</div>
<div class="select-dark">
<select name="search" class="form-control" id="search">
<option value="search" label="Search">Search</option>
</select>
</div>
</div>
I have three select controls and would like them to group inside fieldset like style but without using fieldset. Like in my image,
I have following style to make text field appear like fieldset,
border-radius: 6px;
border: none;
font-weight: bold;
background: none;
box-shadow: none;
border: 2px solid #e4e4e4;
width: 100%;
padding: 25px 5px 5px 10px;
Gives me style like,
Edit:
HTML,
<div id="divPrice" class="margin-all">
<div class="editor-field">
<input data-val="true" data-val-number="The field Price must be a number." data-val-required="The Price field is required." id="Price" maxlength="6" name="Price" type="text" value="20.00" class="hasText input-validation-error" aria-required="true" aria-invalid="true" aria-describedby="Price-error">
<label for="Price">Price</label>
</div>
</div>
Ive created a jsfiddle for you: jsfiddle.net/by6rst01/1/
You can try something like this:
.fieldset {
border: 2px groove threedface;
border-top: none;
padding: 0.5em;
margin: 1em 2px;
}
.fieldset>h1 {
font: 1em normal;
margin: -1em -0.5em 0;
}
.fieldset>h1>span {
float: left;
}
.fieldset>h1:before {
border-top: 2px groove threedface;
content: ' ';
float: left;
margin: 0.5em 2px 0 -1px;
width: 0.75em;
}
.fieldset>h1:after {
border-top: 2px groove threedface;
content: ' ';
display: block;
height: 1.5em;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 0.5em;
}
<div class="fieldset">
<h1><span>Must Add By</span></h1>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
I'm trying to put my own caret icon at the right most end of the maindiv for this custom dropdown. How can I achieve this?
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
}
.maindiv select{
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
You need to use pseudo css :after to .maindiv and set .maindiv to position: relative
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
position: relative; // Added
}
.maindiv select{
-webkit-appearance: none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
width: 100%;
height: 40px;
border: none;
}
.maindiv:after {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
position: absolute;
right: 10px;
content: "";
top: 18px;
pointer-event: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
/*create a parent div with position relative*/
.maindiv .select,
.maindiv .select-font{
width: 240px;
height: 40px;
border: none;
position: relative;
overflow: hidden;
border-radius: 3px;
border: 1px solid #000;
margin: 0 0 15px;
background: #eee;
}
/*style your select tag */
select {
width: 100%;
height: 100%;
border: 0px;
padding: 0 10px;
position: relative;
z-index: 2;
cursor: pointer;
background:transparent;
}
/* Then Remove Browser Default caret or dropdown sign*/
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance: none;
}
/*for IE10*/
select::-ms-expand {
display: none;
}
/*Put the icon in before or after and style it*/
/* 1.Create caret sign with css */
.select::after {
content: "";
position: absolute;
right: 10px;
display: inline-block;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
.select.caret::after {
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select.angle::after {
border: solid #000;
border-width: 0 2px 2px 0;
padding: 2px;
transform: translateY(-50%) rotate(45deg);
}
/* 1. Put Font as a caret sign advisable as ou can control it as a font */
.select-font::after {
content: "";
position: absolute;
right: 10px;
display: inline-block;
z-index: 1;
top: 50%;
transform: translateY(-50%);
font-family: fontawesome;
font-size: 17px;
color: #000;
}
.select-font.caret::after {
content: "\f0d7";
}
.select-font.angle::after {
content: "\f107";
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="maindiv">
<h2>1. Create caret with css</h2>
<div class="select caret">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<div class="select angle">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<h2>2. Use Font awesome Libraray or Any other font Library Just include the style file in header</h2>
<div class="select-font caret">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
<div class="select-font angle">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
</div>
</div>
there is a default icon ,the problem is the width of your select tag is higher than the width of main div
You can do something like this:
.maindiv {
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
position: relative;
}
.maindiv span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: .8em;
}
.maindiv select {
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<span>▼</span>
</div>
Just added display: flex; to maindiv
.maindiv{
width: 200px;
height: 40px;
overflow: hidden;
border: 1px solid black;
border-radius: 3px;
display: flex;
}
.maindiv select{
width: 240px;
height: 40px;
border: none;
}
<div class="maindiv">
<select name="" id="">
<option value="">Item 1</option>
<option value="">Item 2</option>
<option value="">Item 3</option>
</select>
<!-- i want to put my own caret icon here -->
</div>
How can I make the select box look the same on all web browsers and devices but I can't find the right way to do that, so far the biggest problem is on IE 10 and Microsoft edge, it seems the appearance is not working!
can anyone help with this issue? thank you.
.form {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.textfield,
.select {
margin-top: 5px;
padding: 5px;
width: 100%;
}
.select {
background: #fff;
border-radius: 0;
}
<div class="form">
<div>
<label for="text">
<nobr>Text field</nobr>
</label>
<br />
<input name="text" tabindex="1" class="textfield" />
</div>
<br />
<div>
<br />
<select name="select" tabindex="2" class="select">
<option value="">-- Please Select --</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
To make the textbox and select box have exactly the same appearance style-wise, pick the style you want (i.e. something like border: 1px solid #666666 to mimic the <input> element) and apply it to both your .textfield and .select classes together.
You can use JavaScript to only apply that style when the user is on a Mac, if you want. (See this answer.)
.form {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.textfield,
.select {
margin-top: 5px;
padding: 5px;
width: 100%;
border: 1px solid #666666;
}
.select {
background: #fff;
border-radius: 0;
}
.asterisk {
color: #FF0004;
}
<div class="form">
<div>
<label for="text">
<nobr>Text field</nobr>
</label>
<br />
<input name="text" tabindex="1" class="textfield" />
</div>
<br />
<div>
<label for="select">
<nobr>Select<span class="asterisk">*</span></nobr>
</label>
<br />
<select name="select" tabindex="2" class="select">
<option value="">-- Please Select --</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
.form {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.textfield,
.select {
margin-top: 5px;
padding: 5px;
width: 100%;
border: 1px solid #666666;
}
.select {
background: #fff;
border-radius: 0;
}
.asterisk {
color: #FF0004;
}
<div class="form">
<div>
<label for="text">
<nobr>Text field</nobr>
</label>
<br />
<input name="text" tabindex="1" class="textfield" />
</div>
<br />
<div>
<label for="select">
<nobr>Select<span class="asterisk">*</span></nobr>
</label>
<br />
<select name="select" tabindex="2" class="select">
<option value="">-- Please Select --</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
</select>
</div>
</div>
I added an image as a background to the select field, some people recommended it and its working great.
simply add bellow to .select in the css:
background: #fff;
border-radius: 0;
-webkit-appearance: none;
/* **this should be your icon or image to replace the down arrow** */
background :url('http://via.placeholder.com/10x10') 95% no-repeat;
background-color: #fff;
background-position: right;
background-size: 14px;
I just would like to know why my button tag is lower than select tag ?
This is my HTML :
<div class="wrap-form-planning">
<form class="form_search_order form-planning" name="form_search_client">
<!-- Chauffeur -->
<select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
<option value="" selected>Nom du chauffeur</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Client -->
<select type="search" name="client_name[]" class="select-client" multiple size="2">
<option value="" selected>Nom du client</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Semaine -->
<select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
<option value="" selected>Semaine</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
</form>
</div>
My CSS :
.wrap-form-planning{
display: block;
background-color: $bleu;
padding: 20px 0;
text-align: center;
}
.form-planning{
width:80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
select{
font-size: 14px;
margin-right: 10px;
width: (14%-10px);
border-radius: 0;
&.select-chauffeur{
min-width: 150px;
}
&.select-client{
min-width: 120px;
}
&.select-semaine{
min-width: 90px;
margin-right: 0;
}
}
.inp-submit-form-planning{
font-size: 14px;
color: white;
background: $bleu;
border: solid 2px white;
padding: 4px 9px;
&:hover{
color: $bleu;
background: white;
cursor: pointer;
transition: 0.6s;
}
}
}
here is a screen :
They're different sized inline-block elements, so they will aligned baseline by default. You also have a 2px white border on the search icon
You can use form.form_search_order > * { vertical-align: middle; } whatever vertical-align property you want.
But I would use a flex layout. Add display: flex to the form, and use align-items to align them vertically however you want. Also added justify-content: center to horizontally center them since you had text-align: center on the parent originally.
body {
background: blue;
}
.wrap-form-planning {
display: block;
padding: 20px 0;
text-align: center;
}
.form-planning {
width: 80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
}
.form-planning select {
font-size: 14px;
margin-right: 10px;
width: calc(14% - 10px);
border-radius: 0;
}
.form-planning select.select-chauffeur {
min-width: 150px;
}
.form-planning select.select-client {
min-width: 120px;
}
.form-planning select.select-semaine {
min-width: 90px;
margin-right: 0;
}
.form-planning .inp-submit-form-planning {
font-size: 14px;
color: white;
border: solid 2px white;
padding: 4px 9px;
}
.form-planning .inp-submit-form-planning:hover {
background: white;
cursor: pointer;
transition: 0.6s;
}
form.form_search_order {
display: flex;
align-items: flex-end;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrap-form-planning">
<form class="form_search_order form-planning" name="form_search_client">
<!-- Chauffeur -->
<select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
<option value="" selected>Nom du chauffeur</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Client -->
<select type="search" name="client_name[]" class="select-client" multiple size="2">
<option value="" selected>Nom du client</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Semaine -->
<select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
<option value="" selected>Semaine</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
</form>
</div>