How to increase width of select box arrow? - html

I want to increase the width of select box arrow like fa fa caret. i am not getting it how to do. I used img tag inside the each field and given position absolute and adjusted with left top properties but i think this is not proper way of doing this and even i click on the image arrow not select options are opening so i removed this. Please tell me proper solution for it.
.search-categories{
background: #E40444 !important;
color: #fff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>

You can use the css triangle to make the arrow.
HTML
<div class="selectwrap">
<select>
<option>Option 1</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
CSS
select {
border: 1px solid #ccc;
height: 34px;
width: 250px;
padding: 6px 12px;
line-height: 1.42857143;
}
.selectwrap {
position: relative;
float: left;
}
.selectwrap:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000;
right: 4px;
top: 14px;
pointer-events: none;
}

It's very complicated to style form elements cross-browser because very browser has different look for form elements (especially checkbox, radio, select, progress).
I suggest using some plugin like select2 so you can easily style very element browser-independent.
$(document).ready(function() {
$('select').select2({
width: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet" />
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<select>
<option>Op 1</option>
<option>Op 2</option>
<option>Op 3</option>
<option>Op 4</option>
</select>

better use some select element customisation plugin like select2, selectize. The appearance that these plugins create can be customised through css.
You cannot fully control the appearance of select element in cross browser manner with css alone.

Related

Trying to align the text on top of the input box

I am trying to align the text on top of the input box without manually aligning it. Any pointers on how to do this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input class="select-vehicle-list" list="plate-number-list" id="exampleDataList" placeholder="Plate number">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
Using the legend tag
You can use the fieldset + legend combo to get a similar effect using pure CSS. See the snippet below:
fieldset {
border-radius: 5px;
width: max-content;
border: 1px solid #D4D4D5;
}
legend {
font-size: 12px;
}
#exampleDataList {
width: 15rem;
border: none;
}
#exampleDataList:focus {
outline: none;
}
<fieldset>
<legend>Select Plate number</legend>
<div class="select-vehicle">
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
</fieldset>
Alternative
You can give label a relative position and move it towards the position like in the picture you have given. See the snippet below:
.select-vehicle {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 12px;
position: relative;
background: #fff;
width: max-content;
padding-inline: 5px;
top: .5rem;
left: .8rem;
}
#exampleDataList {
width: 15rem;
padding: .8rem 1rem;
border: 1px solid #D4D4D5;
border-radius: 5px;
}
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
More on css positions here.
In the title "legend" was mentioned and the pic resembles a <fieldset> and Bootstrap has foobared the fieldset to be unrecognizable. Here is the markup with BS classes for a fieldset that resembles a fieldset:
<fieldset class="border rounded p-2">
<legend class="float-none w-auto"></legend>
</fieldset>
I added .h6 and .mb-0 to the <legend> to decrease both font-size and margin-bottom. Are you sure you need a <label> or are you adding more form controls to the fieldset?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<form>
<fieldset class="border rounded p-2">
<legend class="float-none w-auto mb-0 h6">Select State of Registeration: </legend>
<input id='state' name="state" class="form-control" list="state-list" placeholder='State'>
<datalist id="state-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</fieldset>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>

How to hide the automatically HTML select element on change orientation in Ipad

I have created the one registration application form. The form is working fine except for Iphone and Ipad when we select the dropdown and close. Change the orientation select element automatically opens.
I also tried the solutions which mention in stack overflow question id: iPad opens html select elements automatically
Please help me anyone and below and I'm sharing the code.
$('.form-control').on("orientationchange", function(e) {
e.preventDefault();
});
.form-input {
margin-bottom: 10px;
font-size: 16px;
font-family: 'SlatePro Bold';
color: #565656;
}
.form-input input {
border: 1px solid #2b5795;
font-family: 'SlatePro Regular';
width: 280px;
}
.enroll-form-input {
margin-bottom: 15px;
}
.enroll-form-input input[type=radio] {
width: 2%;
}
<div class="col-md-5 col-sm-12">
<div class="form-input enroll-form-input">
<label for="state">State</label>
<select class="form-control" id="state" name="state" placeholder="*Illinois" data-parsley-required="true" data-parsley-required-message="*State required">
<option value="" selected disabled>*Illinois</option>
<option value="1">State 1</option>
<option value="">State 2</option>
<option value="">State 3</option>
<option value="">State 4</option>
</select>
<!-- <div class="invalid-feedback invalid-state">
<div class="error-message">
<div class="error-icon"><img src="images/error-icon.png" alt="error-icon" /> </div>
<div class="error-content">*State required/div>
</div>
</div> -->
</div>
</div>
Auto opening of the select element on change of screen orientation in Ipad and iPhone with the below jquery code.
$(window).on("orientationchange", function() {
$('select.form-control').blur();
});

Add text to bootstrap select input in same line

I'm trying to add an asterisk to the select input field, I can easily do if I give the my css but my condition is to use bootstrap 3.3.7 or lesser version and display the asterisk on the same line screenshot.
<style>
.asterik-span{
color: red; font-family: bold; font-size: 16px;
}
.select-diag{
width:90%;border:1px solid #ddd; border-radius:3px;height:32px;
}
</style>
html
<select class="select-diag">
<option >Value1</option>
<option >Value2</option>
<option >Value3</option>
</select>
<span class='pull-right asterik-span'>*</span>
Jsfiddle
To use bootstrap only you can do this
<div class="input-group">
<select class="form-control">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
<div class="input-group-addon">
<span class='asterik-span'>*</span>
</div>
</div>

.form-group to have the height of the element inside

I want to set border-right: 1px solid #2e2e2e to a .form-group element, but it doesn't match the height of its content and it looks ugly.
Here's a demo:
/* My styles */
.form-group {
border-right: 1px solid #2e2e2e;
padding: 0 10px;
}
.bootstrap-select.btn-group .dropdown-toggle {
padding: 15px 40px 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
Edit: Run it in Full page mode.
Set height:auto; to .form-control
float:left of the child elements and fixed height of your bootstrap-select are causing this issue.
Code Snippet
/* My styles */
.form-group {
border-right: 1px solid #2e2e2e;
padding: 0 10px;
}
.bootstrap-select.btn-group .dropdown-toggle {
padding: 15px 40px 15px 0;
}
.mycustomform {} .mycustomform .btn-group {
height: auto;
}
.mycustomform .form-group::before,
.mycustomform .btn-group::before {
content: "";
display: table;
}
.mycustomform {} .mycustomform .form-group::after,
.mycustomform .btn-group::after {
content: "";
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline mycustomform">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
use the below code, hope it works
.form-group{
border-right:1px solid #000;
padding-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
watch in big screen
set margin-bottom:15px; for the div inside .form-group
No sure if this will help anyone, but I have run into issues where the .form-group class does not want to have a dynamic height. Adding height: auto to .form-group will fix this.

Boostrap center inline inputs with no space between them

I removed the spacing between multiple input fields and the submit button using float:left.
But I dont know how to keep this hole block centered on the page.
Here is a Fiddle:https://jsfiddle.net/bb61c412/43/
And the code:
.form-control {
float: left;
border-radius: 0px;
}
.btn {
float: left;
border-radius: 0px;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Remove the floats and use flexbox instead.
JSfiddle Demo
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Otherwise you will have to review How to remove the space between inline-block elements?
Please try this:
Change:
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
to
<div style="margin: 0px auto; padding-top: 30px; width: 427px;">
It is best practice to have all your .js files or CDN(s) at the bottom of your HTML before the closing body tag.
You want to render your .js scripts last to help with your asset pipeline.