how can css for select on Safari same Chrome - javascript

I have a select like this:
<select id="sbInBreak2_hh" name="sbInBreak2_hh">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
On the Chrome it is Ok, the PM required me display on the Safari and IE same on the Chrome? How can css for it?
On Chrome
On Safari and IE

Try like this.
select::-ms-expand { display: none; }
select {
box-shadow:none;
outline:none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
background-repeat: no-repeat;
background-position-x: 21px;
background-position-y: 0px;
border: 1px solid #dfdfdf;
padding: 5px;
width: 44px;
}
/*select::-ms-expand { display: none; }*/
<select id="sbInBreak2_hh" name="sbInBreak2_hh" style="width:44px;">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

You need to apply -webkit-appearance:none; and using background-image for select.

If I understand your question correctly, then you can add the following CSS to prevent the "highlighted" effect on IE and Safari:
#sbInBreak2_hh,
#sbInBreak2_hh:focus {
box-shadow:none; /* Prevent blurred border */
outline:none; /* Prevent hard outline */
}

Related

Coloured drop down menu not working in html

This is my code. I want to highlight the border of the dropdown in red if the checkbox is checked and if the value is 0. If the value is not zero and the checkbox's checked, green, if the checkbox is not selected, gray.
It gives me error but i cannot understand why.
In the js script i tried to insert another else, outside of the first if, but when i do that, the code doesn't work. If i do not insert that, the code works properly, but when i uncheck the checkbox, the colour red/green doesn't go away
setInterval(() => {
document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
const select = document.querySelector(`#punteggio${index+1}`);
if (checkbox.checked) {
if (select.value === '0') {
select.style.borderColor = 'red';
select.style.borderWidth = '2px';
}
}
});
}, 100);
[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 1px solid gray; font-size: 16px;}
section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
label {font-weight: bold; min-width: 150px; display: inline-block;}
input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
#checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}
<ol id = "ordered">
<li>
<select id="punteggio1" >
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
</li>
<hr>
<li>
<select id="punteggio2">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
</li>
<hr>
<li>
<select id="punteggio3">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
</li>
<hr>
</ol>
setInterval(() => {
document.querySelectorAll('#ordered li').forEach((li) => {
const select = li.querySelector('select')
const checkbox = li.querySelector('input[type=checkbox]')
if(checkbox.checked) {
if(select.value == '0') {
select.style.borderColor = 'red';
}
else {
select.style.borderColor = 'green';
}
}
else {
select.style.borderColor = 'grey';
}
});
}, 100);
setInterval(() => {
document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
const select = document.querySelector(`#punteggio${index+1}`);
if (checkbox.checked) {
if (select.value === '0') {
select.style.borderColor = 'red';
select.style.borderWidth = '2px';
}else{
select.style.borderColor = 'green';
select.style.borderWidth = '2px';
}
}
});
}, 100);
[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 2px solid gray; font-size: 16px;}
section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
label {font-weight: bold; min-width: 150px; display: inline-block;}
input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
#checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}
<ol id = "ordered">
<li>
<select id="punteggio1" >
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
</li>
<hr>
<li>
<select id="punteggio2">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
</li>
<hr>
<li>
<select id="punteggio3">
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4">4</option>
<option value="4.5">4.5</option>
<option value="5">5</option>
<option value="5.5">5.5</option>
<option value="6">6</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="8">8</option>
<option value="8.5">8.5</option>
<option value="9">9</option>
<option value="9.5">9.5</option>
<option value="10">10</option>
</select>
<input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
</li>
<hr>
</ol>

Adding CSS Class to Dropdown or Container

I tried to add a CSS Class to the Dropdown, but it is resulting in a Console Error.
Uncaught Error: No select2/compat/dropdownCss
$('.myfilter').select2({
placeholder: name,
allowClear: true,
dropdownCssClass: "mytestdropdown",
});
What I try to achieve is to add a Class to the Dropdown, so I can style the Dropdown-Elements of one Dropdown with CSS (Instead of just styling all Select2 Dropdowns all over the Website!)
select2 is depended on the version of select2 that you are using. The HTML structure changed in one of the versions.
$(".jSelectbox").select2();
And put 'error' class on the select box.
.error + .select2-container,
.error + .select2-container + .select2-container .select2-dropdown {
border: 3px solid red !important;
}
$(".jSelectbox").select2();
.error + .select2-container,
.error + .select2-container + .select2-container .select2-dropdown {
border: 3px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select class="jSelectbox error">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC" selected="">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
It turned out that there are 2 select2 files:
select2.js
ans select2.full.js
For my purpose one would need the select2.full.js - otherwise the options dropdownCssClass and containerCssClass are not working.

Canvas size of IText

I'm working on project for Canvas editor. I'm using IText to add text in a canvas. The user can change Font, make text bold italic and so on. The problem when user want to change Font Size of the text he can but the text change not in px size. If is needed I can put all code. And can show the live version.To change size at now I use this code
document.getElementById('fontSize').onchange = function() {
canvas.getActiveObject().set("FontSize", this.value);
canvas.renderAll();
}
<div class="select-wrapper font-size">
<select id="fontSize">
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
<option value="42">42</option>
<option value="44">44</option>
<option value="46">46</option>
<option value="48">48</option>
<option value="50">50</option>
<option value="52">52</option>
<option value="54">54</option>
<option value="56">56</option>
<option value="58">58</option>
<option value="60">60</option>
<option value="62">62</option>
<option value="64">64</option>
<option value="66">66</option>
<option value="68">68</option>
<option value="70">70</option>
<option value="72">72</option>
<option value="74">74</option>
<option value="76">76</option>
<option value="78">78</option>
<option value="80">80</option>
</select>
</div>
I am sorry, but your assumption is wrong, please take this answer as a long comment,
The problem when user want to change Font Size of the text he can but
the text change not in px size.
as you can read in the fabric.js source code:
/**
* Font size (in pixels)
* #type Number
* #default
*/
fontSize: 40,
the default (Ed. and unique) unit is in pixel.
If you run the executable snippet below you can see the fabric iText, and input text, update their font size in sync
$(function() {
var canvas = new fabric.Canvas('c');
var iTextSample = new fabric.IText('hello\nworld', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fontSize: $('#fontSize').val(),
});
$('#dText').css('fontSize', $('#fontSize').val() + 'px');
canvas.add(iTextSample);
canvas.setActiveObject(iTextSample);
$('#fontSize').change(
function() {
$('#dText').css('fontSize', this.value + 'px');
canvas.getActiveObject().set("fontSize", this.value);
canvas.renderAll();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="150" height="150" style="border: 1px solid rgb(204, 204, 204);"></canvas>
<select id="fontSize">
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</select>
<input id="dText" value="hello world">

z index is not working in inter explorer above pdf file

am displaying a selection bar above pdf file. Here is its link
http://tashen.byethost13.com/flang.html
It works in chrome and Firefox but not in IE.it goes behind the pdf file in IE.
this is the code of a div and selection bar.
<div style="height:100%; width:100%; background-color: rgba(125,55,55,0.5); position: fixed; z-index: 8000; " id="Outalertwind">
<select id="program_category_list" name="programcategory_list" style="margin-left:50px; width: 200px; height: 30px; background-color: rgba(125,55,55,0.5); z-index:5000000000; color:#FFF;" onchange="showpdf(this.value)">
<option value="sel">-- Select size --</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="32">32</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="65">65</option>
<option value="80">80</option>
<option value="100">100</option>
<option value="125">125</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="375">375</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
<option value="500">600</option>
</select>
<button style="margin-right:30px; height: 30px; float: right; margin-top: 5px; background-color: #fa5c00" onclick="showpdf(this.value)">Cancel</button>
</div>
any help would be much appreciated .
Thanks :)

aligning HTML select elements on one line

i am working on a mobile app using HTML/CSS/JavaScript. I have two select option (drop down menu), one for number of dates and the other one for number of years. I want to be able to see these select options in one line, but no matter what I do, I get a drop down menu (number of dates) on one line and on the next line I get the drop down menu for number of years. Below you can see my codes
<div data-role="controlgroup" data-type = "horizontal" >
<label for="select-choice-1" >Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline = "true" style = "float: left">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select><br />
</div>
UPDATE:
I am testing these codes on Android browser using jQuery mobile framework.
Try floating both select tags left and adding a clear:both to the styling on the label. If you want the label above the two selects, just add a <br /> right below the label.
It would look something like
<label>Label Value</label>
<select>
<option>Etc...</option>
</select>
<select>
<option>Second select option...</option
</select>
and the CSS would be
label {
clear:both;
}
select {
float:left;
}
Also, as a heads-up, you end your second select tag before the first option tag, so they aren't included.
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. You need to get rid of the / right before the ending of the tag.
It's the width on the ui-select class that's causing your issue, Setting the width to auto should correct the issue. jQM adds a ton of extra markup for the look and feel on the page to be consistent across multiple devices. If you view the page source in a browser such as Chrome or FireFox you can see the extra elements. In your case you needed to modify the ui-select class as it has a width of 60% as the default.
Live Example:
http://jsfiddle.net/phillpafford/trdYP/47/
JS:
$('#select-choice-1').parent().parent().css('width','auto');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-inline="true">
<label for="select-choice-1" data-inline="true">Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline="true">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select-year" id="select-yaer" data-inline="true">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
</div>
If you make them both float left they will sit side by side, as long as their combined widths don't exceed the width of the container.

Categories