We Keep Coding

Center date in input field with date type

I want to center date in input, not input inside div. If I do centering, it centers date inside of part of input because there is a right-hand side panel for choosing a date based on a calendar, which resizes dependently of input width.
Small code snippet for demonstration:
.center {
text-align: center;
}
<div>
<input type='date' class='center' value='2006-01-01' width='100'>
</div>
I tried to force centering with ignoring the right panel. Then the date is not fully visible.
Another approach was to find the size of calendar choice panel, and I did not find any mechanism both on StackOverflow and Internet to calculate the width, plus I did experiments with a ruler to find the proportion, and it also did not work.
The last, I tried searching into StackOverflow and did not find any similar questions.
In my project, I use plain JavaScript, jQuery, HTML, and CSS.

First of all, there is nothing wrong with the text-align: center part, it is working as expected, the problem is that the buttons on the right side of the input (the ones that appear when you hover over the input) need to take up some space as well.
So, you will have to hide those!
You can use the required="required"attribute on your <input> element if you want to remove the "x" button, and these 2 CSS rules to control the arrows and the dropdown (however, do note how the nice date-picker doesn't appear anymore and you have to type down a date using your keyboard when you use the input[type=date]::-webkit-calendar-picker-indicator rule):
.center {
text-align: center;
}
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
display: none;
}
<div>
<input type='date' class='center' value='2006-01-01' width='100' required="required">
</div>
See this question if you are interested in more of this.
Or you can just use the JQuery date-picker if you want to.

If you want to center an <input> inside a <div>, you need to apply text-align: center to the <div> element, not the <input>. This can be achieved by simply moving your class .center to the <div> instead:
.center {
text-align: center;
}
<div class='center'>
<input type='date' value='2006-01-01'>
</div>
EDIT:
If you want to center the text in an <input type='date'>, you first need to convert the input to a block-level element with display: block. Note that the text-align is relative to the dropdown caret and cross, so you might actually want to use text-align: right and a slightly larger width instead:
.center {
display: block;
text-align: right;
width: 170px;
}
<div>
<input type='date' class='center' value='2006-01-01'>
</div>
Hope this helps! :)

I strongly suggest you not to use browser’s datepickers cause they’re not very reliable and cross-browser (many older browsers don’t support it).
jQuery UI is a great framework for these widgets, and you can completely customize the datepicker through CSS.
Note that you’ll need the base jQuery framework for jQuery UI to work but it is very lightweight and I suggest you to use it even with other JavaScript codes in your application.

Instead of adding 'required', I recommend adding
input[type=date]::-webkit-clear-button
otherwise the 'x' still takes some space and it's not truely centered.

How to check css's :invalid base class on blur

So I know on blur in css is not a thing but I want that the same thing that happens in this ex.
input:focus:invalid {
display: block;
background: red;
}
will happen on blur is there a way using a different language like JS or jquery etc to run the check? I know there is a way to check if text is valid using those languages but it does not work with what I do JSfiddle
ps
If I wasn't clear: trying to run css class using css+html valid/pattern but on blur

Internal CSS not override external CSS (api google)... why?

I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
why ???
thanks!
EDIT
the result page is created by google cse and is added in my div.. this the code created:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
Here there is a part of my code:
http://jsfiddle.net/2rg86vm6/1/
is only a part so doesn't work ;)

The answer to "Why isn't my CSS being applied?" is almost always that some other style definition is overriding it. When this happens, it can be frustrating, but don't despair: There are only 2 things you need to know:
Understand selector strength and CSS specificity.
Know how to use your browser's developer tools.
CSS Specificity and selector strength
The "selector" is the part of your style definition that targets (or "selects") your element. It's the code that comes before the curly braces in your CSS:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
The above snippet represents a single CSS rule. The selector for the above rule is .gs-results.
Selector strength is important when you have two rules that match a single element and the styles conflict:
.a { color: blue; }
p { color: red; }
<p class="a">Am I red or am I blue?</p>
In the above example, the text is blue because a class selector has a higher specificity than an element selector. If you wanted to force the text red, you could strengthen your p selector by adding the class to it:
.a { color: blue; }
p.a { color: red; }
<p class="a">Am I red or am I blue?</p>
Now the text will be red because a selector consisting of element and class has a higher specificity than just a class selector. We can make in blue again, by increasing the specificity of the first selector. For example, specifying an ancestor class:
.x .a { color: blue; }
p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Further reading:
CSS Standard: Calculating specificity The algorithm is actually quite simple.
CSS Specificity calculator
Finding conflicting selectors
Understanding specificity is vital, but only helpful if you know the style rule that is overriding your own. Fortunately, every browser comes with excellent developer tools that make discovering applied rules a breeze.
In any browser, right click the element whose styles are not being applied as you expected, and choose "Inspect Element". This will open the developer tools with the DOM inspector open and the clicked element selected. You may have to manually select a parent or child element of the one that is selected. Once you have the correct element selected, look at the rules that are being applied. You should see yours in the list with the style properties in strikethrough:
If your particular element has a lot of style rules applied and you are having trouble finding the CSS property you care about, try the "Computed" tab. Additionally, Chrome let's you filter the styles displayed by entering the property you are interested in where it says "Filter...". IE let's you filter the computed tab.
Now that you have identified what rule is overriding your styles, you can see how you need to strengthen your selector. This should not be a difficult thing. We will get our text back to red by borrowing from the other rule's selector:
.x .a { color: blue; }
.x p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Why not just use !important?
Stephanie Rewis's tweet says it best:
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
It causes maintenance headaches. If this is code you will ever need to maintain, you will hate yourself later for using !important. If other devs need to maintain it, they will hate you.

Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing (better way is to strenghten your selector):
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000 !important;
text-decoration: none !important;
display: none !important;
}

How do widgets that put HTML in a HTML textbox (tags, Google+ Invite, etc) work?

I find it hard to get myself started in this topic so I can write my own widgets for my own needs. How can I combine plain text and HTML elements (links, images), like seen everywhere on the web (Google, Facebook, etc), in a HTML textbox in a way that it still behaves all together like simple text (i. e. deleteable with backspace)?
How does this work? What is the underlying "trick"?

Ok, your question indicates that you need a starting point,
lets then start with a basic HTML such as a div, a ul, and an input
<div class="myTags">
<ul id="tags">
<li class="nd"><input type="text" id="tagInput" placeholder="add some tags..."/></li>
</ul>
</div>
now lets write some jquery to handle the tagging:
$('#tagInput').keypress(function(e){
if (e.keyCode === 13) {
tag = $(this).val();
if(tag.length > 0){
var newLi = $('<li></li>').text(tag);
}
$('#tags').append(newLi);
$(this).val('');
}
});
this jquery snippet listens to the keypress event on the provided input which I called tagInput
the enter key goes with keyCode 13 hence, if it is been hit you take the value of the textbox and and create a new li element then you go and append it to your ul.
what is missing here is how to make the ul looks like horizontal, this is a starting css to be used:
#tags{
float: left;
min-height: 10px;
min-width: 100px;
margin:0px;
padding: 0px;
list-style-type: none;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
}
#tags li { display: inline-block; padding: 10px;}
#tagInput{background: none;
border: none;}
which will make the ul horizontal, and it will delete the background from the input and adds the border and the background to the ul, which is a lovely trick specially with the placeholder being available, Now for the backspace deleting process it is simple too, take the previous jquery snippet and add the following code to it:
$('#tagInput').keyup(function(e){
if(e.keyCode === 8 && $(this).val().length<=0){
$('#tags li:last').not('.nd').remove();
}
});
which what it does is simply check for keyCode 8 which is a backspace, Note: some people would recommend to listen to keyCode 46 which is delete, it is up to you.
and I also check for the input value so it should be empty to delete the last inserted tag.
Now by wrapping it up you have the following Fiddle to check.
which is a good start point so you can now do whatever you want with the tag styles and many other fancy stuff.
Hope that I helped.
Disclaimer: the previous code is not to be copy pasted, and it is there just for point clarification.
Update
also, adding outline:0 to the input will make more real, see Fiddle
#tagInput{background: none;
border: none; outline:0}

This is all done through javascript (mostly). Look into jquery. All the heavy lifting is done and provides you with a "easy-to-use" javascript library for client-side scripting that can make all these things possible. Obliviously the more complicated you get, the more custom scripting will be needed.

If I understand you correctly, you want to display both text and any other content (images) in one editable component (text area) that looks like native component. I think you can easily achieve that with CSS. The whole trick is to clear the default styling of textarea and wrap it with <div> with custom CSS.
See an example here
You can further enhcance the solution with Javascript and CSS. For instance, you can make the textarea to auto expand as you type
Hope that helps!

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/