Customize image was added to the select box, every browser it was displaying fine except in IE9. I can see two arrows one is customized arrow image and another drop down Icon. How can i remove that Drop down Icon that come on IE9. Please help me if any one knows.
.dropdown {
height: 90px;
overflow: hidden;
background: url(../images\valdropdown.png) no-repeat right;
background-size: 10% 100%;
position:relative;
display:inline-block;
}
.dropdown select {
background: transparent;
-o-appearance:none;
-prefix-appearance: none;
-ms-box-sizing:content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
appearance:none
padding:5px;
font-size: 16px;
line-height: 1;
border: none;
border-radius: 0;
height: 50px;
z-index: -1;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
It can be done something like this. Fiddle here
In example, a fixed width set on select and wrap a div with a lower width and overflow:hidden in order to mask/hide the dropdown. It has full support and essentially does hide the arrow in all browsers.
HTML
<div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
CSS
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
OR with pure CSS
select::-ms-expand {
display: none;
}
OR with jQuery selectbox replacement.
It's a jQuery plugin.
jQuery selectbox plugin
Related
The file upload field is controlled by the browser so that one should automatically be translated based on the browsers settings. I need set my language on this button. How I can do that?
I've found solution on sitepoint. Just below .file-resume on your file input name and then modify your button.
/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-resume {//FILE-REsume == your name of file input
display: inline-block;
position: relative;
width: 120px;
height: 40px;
border-radius: 5px;
border: solid 1px #11b28e;
background: gray;
color: #FFF;
overflow:hidden;
}
/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}
/* Add button text */
.wpcf7-file:before {
content: "прикріпити файл";
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}
To change the text 'Select File' on the button I use the code below. And it works fine for me.
However, I can't change the text "No file chosen" next to the button.
Can anyone tell me something about this topic?
.wpcf7-file::-webkit-file-upload-button {
visibility: hidden;
}
.wpcf7-file::before {
content: 'Select File NEW';
display: inline-block;
background: #00a0dd !important;
padding: 15px 15px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
color:#FFF
}
.wpcf7-file:hover::before {
border-color: black;
}
.wpcf7-file:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<textarea id="Box" class="tags form-control" placeholder="X Axis values"></textarea>
i want show user selected options in text box area in tag wise with remove option.
How to use tags-input of bootstrap with textarea? I have applied data-role="tagsinput". But tags-input is not working. as we know, we have the same issue in Stackoverflow. but for that no solution.
need solution/hint for this How to use tags input of bootstrap with textarea
Bootstrap tags-input does not work with textarea. Support is not provided.
However you can use it with input type="text" and apply the following css to make it work like textarea.
.bootstrap-tagsinput {
min-height: 100px;
}
See this link
try this css on input text for scroll on Input Like textarea
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
follow this step
<style>
.bootstrap-tagsinput {
line-height: 15px !important;
min-height: 165px;
padding-top: 20px;
padding-bottom: 20px
}
span.tag.label {
position: relative;
float: left;
margin: 2px 5px;
}
.bootstrap-tagsinput input {
position: relative;
float: left;
height: auto;
margin-top: 4px;
margin-left: 5px;
padding: 0px;
text-align: left;
width: auto;
}
<style/>
<input type="text" class="form-control inputtags" data-role="tagsinput" name="keywords">
I am using the range slider in my website for showing the image zooming and zoomout by using "range" option but i want to change this as a vertical slider and want to display customized thumb button also
<input class="zoom-range vertical" type="range" orient="vertical" step="0.05" min="0.1" max="1">
And css for the different browsers like
input[type=range].vertical
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 0px;
height: 100px;
margin-top: 20px;
}
The above css will do the slider as vertical but how can i change the pointer color and hide the width of scroller?
I am getting my slider like this
And i want to make my slider as shown in below
Please help me to sort out this issue
It's working for Firefox but for chrome browser if i will use the properties
input[type=range]::-webkit-slider-thumb {
background: blue;
-webkit-appearance: slider-vertical;
}
these two are not applying to the pointer in chrome. And if i will do -webkit-appearance: none; then the pointer color is changing
Try this css:
input[type=range] {
-webkit-appearance: none; // important
margin: 18px 0;
width: 100%;
transform:rotate(90deg); //for vertical slider
outline:none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 1px;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: #BFBFBF; // you can change it accordingly
border-radius: 1.3px;
}
input[type=range]::-webkit-slider-thumb {
height: 36px;
width: 16px;
border-radius: 3px;
background: #004C8F; //Your preferred color
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
Demo: http://jsfiddle.net/esvqpkbf/
Fiddle also has CSS for mozilla, you can modify it accordingly.
I am hoping to create a form with multiple dropdown selection menus.
I'm pretty new at JQuery and was hoping someone could help me to figure out my problem.
I'm trying to figure out how to get each list to function individually, without having to duplicate the JQuery code. Is this possible? Here is my current codepen : http://codepen.io/kelseyhisek/pen/HbGDm
<h1>Dead Simple Dropmenu</h1>
<div class="ds_select">
<div class="ds_label ds_placeholder">Select me...</div>
<ul class="ds_list">
<li>What?</li>
<li>It's</li>
<li>That</li>
<li>Easy?</li>
</ul>
</div>
<div class="ds_select">
<div class="ds_label ds_placeholder">Select me...</div>
<ul class="ds_list">
<li>What?</li>
<li>It's</li>
<li>That</li>
<li>Easy?</li>
</ul>
</div>
#import url(http://fonts.googleapis.com/css?family=Lato:300,700);
body{
text-align:center;
font-family:Lato;
color:#999
}
.ds_select,
.ds_select *
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.ds_placeholder{
padding:15px 18px;
position:relative;
height:50px;
z-index:2;
}
.ds_select
{
display: inline-block;
position: relative;
line-height: 1;
width: 200px;
max-height:50px;
padding: 0px;
border: 3px solid #5e5e5e;
background: #ffffff;
color: #444444;
font-size: 11px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
outline: 0;
overflow:hidden;
cursor: pointer;
transition:all 0.3s
}
.ds_select:before,
.ds_select:after
{
content: "\25B2";
position: absolute;
right: 10px;
top: 12px;
font-size: 7px;
}
.ds_select:after
{
content: "\25BC";
top: 20px;
}
.ds_select:hover,
.ds_select.open{ border-color: #000000; }
.ds_select.open{max-height:600px }
.ds_select .ds_label
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds_select .ds_list
{
margin-top: -30px;
opacity:0;
width: inherit;
z-index: 1;
padding: 0;
transition:all 0.2s
}
.ds_select.open .ds_list { opacity:1;
margin-top: 0px;}
.ds_select .ds_list li a
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
position: relative;
padding: 10px 10px;
list-style-type: none;
color:#999;
text-decoration:none
}
.ds_select li a:hover
{
background: #eee;
color: #000;
}
$('.ds_placeholder').on('click',function(e){
e.preventDefault();
if($('.ds_select').hasClass('open'))
$('.ds_select').removeClass('open');
else
$('.ds_select').addClass('open');
});
//Or just remove this and go to link
$('.ds_list a').on('click',function(e){
e.preventDefault();
$('.ds_placeholder').text($(this).text());
$('.ds_select').removeClass('open');
});
Ah, so the problem is that inside your click handlers your selecting ".ds_select" which is looking globally for all divs with the class .ds_select. It then adds the open class to all of them. I think what you want is this inside your click handler:
$('.ds_placeholder').on('click',function(e){
e.preventDefault();
var $dropdown = $(this).parents('.ds_select');
$dropdown.toggleClass('open');
});
By the same token you'll want to update the placeholder like this:
$('.ds_list a').on('click',function(e){
e.preventDefault();
var $dropdown = $(this).parents('.ds_select');
var $placeholder = $dropdown.find(".ds_placeholder");
$placeholder.text($(this).text());
$dropdown.removeClass('open');
});
Looks like there's also an issue with the dropdown pushing the other dropdown to the bottom;
I think you could fix that by adding vertical-align: top; to your ds_select class, but I'm not so hot with CSS. So maybe somebody else will chime in.
Update used toggleClass for simplicity hat-tip Steve Sanders
I'm trying to make a sortable grid that mimics the functionality at http://farhadi.ir/projects/html5sortable/ where the element grabbed disappears when you click on it and it has those dotted lines remaining behind. However, copying the computed CSS on the demo page is not giving me the desired effect.
Is there some options I'm missing when initializing the sortable or something?
I'm just initializing the standard way:
$('.sortable').sortable();
Here is a JSFiddle: http://jsfiddle.net/boeu4zdg/1/
As author says on the description page:
Use .sortable-dragging and .sortable-placeholder selectors to change the styles of a dragging item and its placeholder respectively.
To make it exactly like in demo, you need the following styles (took from demo page, removed not needed styles):
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
See updated jsfiddle.