Removing Chrome style for input text (list) - javascript

I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values.
I am also using AngularJS.
The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)
Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/
Here's the code.
<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
<datalist id="typeL">
<option ng-repeat="objectType in objectTypes"
value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>
CSS:
.list {
background: url('../images/arrow.png') no-repeat top right;
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding:0 30px 0 10px !important;
color: #58585A;
overflow: hidden;
margin: 10px;
}
.input {
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding: 0 1em;
color: #58585A;
margin: 10px;
}
I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?

Solved by introducing this CSS lines:
input::-webkit-calendar-picker-indicator {
display: none;
}

Related

How to extract text using DoodleNerd's CSS textboxes?

I recently used DoodleNerd's CSS Textbox Generator (http://doodlenerd.com/html-control/css-textbox-generator) to make a really sleek looking textbox for my website. I'm familiar with extracting text from forms; I've done it in two main forms:
document.getElementById('field').value
or
driver.findElement(By.id("field")).getCssValue("value")
For some reason, when I use DoodleNerd's textboxes, the values in the box aren't extracted... it's really odd.. I'll include my css and html for reference:
#field {
position: absolute;
left: 33px;
top: 170px;
overflow: visible;
width: 129px;
white-space: nowrap;
text-align: left;
font-family: Comic Sans MS;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(249,249,249);
}
.field {
padding: 0px;
font-size: 15px;
border-width: 5px;
border-color: #CCCCCC;
background-color: #ba6fc5;
color: #f9f9f9;
border-style: inset;
border-radius: 5px;
box-shadow: 4px 2px 5px rgba(66,66,66,.75);
text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
.field:focus {
outline:none;
}
<div id="field">
<input type="text" value="e.g. '999'" class="field" />
</div>
Thanks a million!
It appears like the value you want is: e.g '999' correct? If so, this should be your JavaScript:
var fieldValue = document.querySelector('.field').value;
It appears like the value you want has the class of field, not the id of field.
If you must use document.getElementById(), you could also do this:
var field = document.getElementById('field');
var value = field.firstElementChild.value;
But I think the first way is probably better.

Background Opacity (USING RGBA)

I am trying to make something simple here, but its getting me confused.
If I have this in my css.
.body {
width: 150px; height: 40px; padding: 20px;
background-color: rgba(255,0,0,1); text-align: center;
border: 1px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: block; top: 50px;
font-weight: bold; font-size: 25px;
}
And I want to change the opacity when you click on a button and I have this in my HTML:
<button onclick="lessColour()">-Colour</button>
How can I create this lessColour() function so everytime I click on the button, it will decrease the alpha in rgba by 0.1?
rgba doesn't take precents. it takes a value between 0-1;
rgba format:
rgba([0-255], [0-255], [0-255], [0.00-1.00])
example:
rgba(120, 200, 10, 0.80)

Making css numbers to look pretty

I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.
If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>
I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter

Text overlapping issue only in Internet Explorer

I have search box with text input and button input side by side with button inside the search box. On Internet Explorer, when we type a long string the text overlaps with the button. This works flawlessly with other browsers like firefox and chrome and text overlaps do not happen there.
HTML code:
<td style="width: 44%" align="right">
<div class="searchBox_div">
<input type="text" id="search" name="search" style="background-color: white; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-left-colors: none; -moz-border-bottom-colors: none; border-color: black -moz-use-text-color black black; border-image: none; padding: 2px 15px 0 0; border-width: 1px;">
<input type="button" id="overlay_search" title="Perform Search" style="-moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; padding: 5px 6px; border-width: 0px 0px 0px 0px;">
</div>
</td>
CSS:
.searchBox_div {
display: inline-block;
verticle-align: middle;
background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;
position: relative;
}
.searchBox_div: before {
content: "";
display: block;
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
left: 4px;
top: 50 % ;
margin-top: -12px;
z - index: 1;
overflow: hidden;
}
.searchBox {
height: 30px;
width: 400px;
padding-left: 30px;
font-size: 20px;
}
.searchBox_div::-ms-clear {
width: 0;
height: 0;
display: none;
}
#overlay_search {
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
height: 24px;
right: -4px;
top: 50 % ;
background-position: -48px 5px;
margin - top: -11px;
z - index: 1;
display: inline-block;
overflow: hidden;
}
#overlay_cancel {
background-image: url("/themes/default/images/glyphicons-halflings-black.png");
background-position: -313px 5px;
background-repeat: no-repeat;
display: inline-block;
height: 24px;
line-height: 14px;
margin-top: 0;
vertical-align: text-top;
padding: 2px 25px 0 0;
width: 14px;
}
I will post screenshot as soon as I get enough points on stackoverflow. I am trying something like this from Dojo Javascript which is partially working for me. But does not look as good as I want.
if(dojo.isIE){
on(dom.byId("search"), "focus", function () {
style.set("search", "backgroundColor", "rgb(253,216,87)");
style.set("searchBox_div", "border-width", "1px");
style.set("searchBox_div", "backgroundColor", "rgb(253,216,87)");
style.set("searchBox_div", "background-position-x", "15px");
});
}
Please help me fix this in internet explorer.
If you have problems only with the IE you can target your CSS only for IE different versions, i had this problems with different IE version and the solution below helped me a lot and still helping me:
check out browser compatibility: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For example tell me in which version of IE u have problem:
and u can do something like this to create a css file and write inside the css
[if IE]
<link rel="stylesheet" type="text/css" href="your_css_that_will_affect_only_ie.css" />
[endif]
or u can do something like this
[if IE]
.searchBox_div {
display: inline-block; // u change anything here
verticle-align: middle;// u change anything here
background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;// u change anything here
position: relative;// u change anything here
}
[endif]
I couldn't see any difference in the explorer with your code. What i can advice you for this class
#overlay_search{
right: -22px; // take it out completely from input field
}
if that will not help make a screenshot how is looking now and how u want that will look. And i will fix exactly as you wish.
I solved this issue by adding CSS and HTML right from stratch and removing absolute positioning and other unnecessary CSS.
<div>
<input type="text" class="tftextinput" name="search" id="search" size="21" style="border:gray solid;border-width: 1px 0px 1px 1px;"/>
<input type="submit" value="" id="overlay_search" class="tfbutton" style="border: 1px gray solid;height:22px;border-width: 1px 1px 1px 0px;"/>
</div>
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
width: 94px;
height:10px;
border:none;
}
.tfbutton {
margin: 0px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
background: url(/themes/default/images/glyphicons-halflings-black.png) #ffffff no-repeat center center;
background-position: -47px 3px;
border:none;
width:20px;
}

Which CSS should I apply to appear tool tip over a text box?

I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.
you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/
First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.

Categories