Multiple select box styling inside fieldset without using fieldset - html

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>

Related

How to Change Label Element Side to Left

I have the flora forms form and I can't get the element (located on the flo-select:before on css) to move it to the left side.
Here's what i have right now:
And here's what i want to acheive:
Here's the HTML code:
Here's a LIVE One: Live Demo
.floraforms .flo-select>select::-ms-expand {
display: none
}
.floraforms .flo-select:after,
.floraforms .flo-select:before {
content: '';
position: absolute;
pointer-events: none;
z-index: 15;
}
.floraforms .flo-select:before {
top: 2px;
right: 2px;
width: 34px;
bottom: 2px;
background: #F2F4FA;
border-left: 1px solid #d3dae7;
-webkit-border-radius: 0 1px 1px 0;
-moz-border-radius: 0 1px 1px 0;
-o-border-radius: 0 1px 1px 0;
border-radius: 0 1px 1px 0;
}
<div class="elem-group colm colm6">
<label class="field flo-select">
<select id="month" name="month">
<option value=""> Select month </option>
<option value="01">01 - Jan</option>
<option value="02">02 - Feb</option>
<option value="03">03 - Mar</option>
<option value="04">04 - Apr</option>
<option value="05">05 - May</option>
<option value="06">06 - Jun</option>
<option value="07">07 - Jul</option>
<option value="08">08 - Aug</option>
<option value="09">09 - Sep</option>
<option value="10">10 - Oct</option>
<option value="11">11 - Nov</option>
<option value="12">12 - Dec</option>
</select>
<i class="arrow double"></i>
</label>
</div>

Added style to Select element, but now have double toggle button

I have added css styling to my select elements. However, as you can see below the element now has a white toggle button and a black one. How can I get rid of the black one?
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<select class="styled-select yellow semi-square" (change)="getLocations()" id="interest">
<option value="default">Select your interest</option>
<option value="movie_theater">Movie Theaters</option>
<option value="movie_rental">Movie Rental</option>
</select> within
<select class="styled-select yellow semi-square" (change)="getLocations()" id="distance">
<option value="2500" selected>2,5</option>
<option value="5000">5 </option>
<option value="10000">10</option>
<option value="20000">20</option>
</select> kilometers <br />
Add -webkit-appearance: none; to select
See this
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
-webkit-appearance: none;
-moz-appearance: none;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<select class="styled-select yellow semi-square" (change)="getLocations()" id="interest">
<option value="default">Select your interest</option>
<option value="movie_theater">Movie Theaters</option>
<option value="movie_rental">Movie Rental</option>
</select> within
<select class="styled-select yellow semi-square" (change)="getLocations()" id="distance">
<option value="2500" selected>2,5</option>
<option value="5000">5 </option>
<option value="10000">10</option>
<option value="20000">20</option>
</select> kilometers <br />

button is lower than others elements form

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>

tab inside input type text

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

Add icon to select dropdown

I'm trying to add in an icon to the end of a select group. I've abs positioned the pseudo element but I'm unable to see it.
Markup:
<select id="signup-sector" name="signup-sector" class="signup-select">
<option value="sector">Sector</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
CSS:
select.signup-select::after {
content: "\f107;";
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
color: black;
}
The select has a position relative set.
Thanks
here is what i do, try this..
hope this may help you...
.signup-select:after {
content: "";
position: absolute;
right: 10px;
top: 3px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
<select id="signup-sector" name="signup-sector" class="signup-select">
<option value="sector">Sector</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>