I have a form that is display:none and when I am going to hover on a another link, then the form comes up. How can I put the cursor into the input field? Is there a way to do it in css?
If I make the form to display:inline-block directly, the cursor is in the input field.
My CSS:
.search-bar {
display: none;
}
#main-nav a:hover .search-bar {
display: inline-block;
}
My Form in the html file:
<input id="search_search" type="text" autofocus="autofocus" placeholder="Placeholder.Search.Main" name="search[search]"></input>
We can use HTML5 auto focus attribute
For Example:
<input type="text" name="name" id="search_search" placeholder="Placeholder.Search.Main" name="search[search]" />
We can use JQuery to do this using foxus()
Javascript:
$("#show").hover(function(){
$("#search_search").show();
$("#search_search").focus();
});
Doesn't work in Firefox but works in Safari
I think you might be looking for some client-side scripting (Javascript or javascript with JQuery).
If you don't want to accomplish this through client-side scripting, and only want to support html5, then you should take a look into the "autofocus" attribute of html5. See the top answer to this post.
Related
I'm stuck on this even though it is very simple.
I'm have a custom css file. In this I have added this piece of code:
input[type=text] {
margin-top:5px;
width:370px;
}
I have one page where I want to override this but when I try to with the following, the width of the text input does not change.
input[type=text] {
width:100px !important;
}
Try <input type=text style="width:100px;" /> That seems to work for me when using bootstrap .
You should be using CSS classes here, not to mention its better practise to use percentages rather than finite pixel values.
In any case, avoid inline CSS because thats bad practice.
CSS:
#narrow_input {
width:100px;
}
html:
<input type=text class="narrow_input" />
That way when you decide to make the narrow input red as well, you can just add color:red; to the stylesheet.
I am working on my website so it look and work almost the same even if JavaScript is disabled, So i have a INPUT and TEXTAREA tags when JavaScript is enabled i can focus my mouse on the INPUT and the TEXTAREA style become display: block from display: none, Is there a way to check with CSS if the user is focus on the INPUT tag and then apply some styles to the TEXTAREA tag?, Thank you all and have a nice day.
If you have the textarea after the textbox than yes, you can use + adjacent selector
textarea {
display: none;
}
input[type=text]:focus + textarea {
/* Switching styles for textarea when textbox is focused*/
display: block;
}
Demo
Note: Add a class to input[type=text] for selecting specific
element, else the above selector will trigger all textarea and
input[type=text] elements
You can use an adjacent selector like this:
JSFiddle Demo
HTML:
Click on the text input
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
CSS
input[type=text]:focus {border:1px solid red; }
textarea { display:none; }
input[type=text]:focus + textarea {display:block; }
Though you will notice that you can't actually click and focus on the textarea when it appears.
Yes, you can do it with CSS using Pseudo-classes
Example for :focus
To avoid hiding the textarea after focusing on input use the following:
textarea:hover,textarea:focus{
display:block;
}
See the demo here.
iOS devices add a lot of annoying styles on form inputs, particularly on input[type=submit]. Shown below are the same simple search form on a desktop browser, and on an iPad.
Desktop:
iPad:
The input[type=text] uses a CSS box shadow inset and I even specified -webkit-border-radius:none; which apparently gets overridden. The color and shape of my input[type=submit] button gets completely bastardized on the iPad. Does anyone know what I can do to fix this?
The version I had working is:
input {
-webkit-appearance: none;
}
In some webkit browser versions, you may also be faced with the border-radius still being in place. Reset with the following:
input {
-webkit-border-radius:0;
border-radius:0;
}
This can be extended to apply to all webkit styled form components such as input, select, button or textarea.
In reference to the original question, you wouldn't use the value 'none' when clearing any unit based css element.
Also be aware that this hides checkboxes in Chrome, so perhaps use something like input[type=text] or input[type=submit], input[type=text] or instead filter out those that don't use rounded corner settings such as input:not([type=checkbox]), input:not([type=radio]).
You can get rid of some more webkits form, input, etc. styling with this:
input, textarea, select {
-webkit-appearance: none;
}
For the submit button don't use:
<input type="submit" class="yourstylehere" value="submit" />
Instead use the button tag:
<button type="submit" class="yourstylehere">Submit</button>
This worked for me.
have a look to normalize.css
There's a demo where you can test the form elements and see how they look like in ios.
There are multiple webkit oriented properties.
This is the what I use in my projects
* {
-webkit-tap-highlight-color: transparent;
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
-moz-user-select: none;
-webkit-user-select: none;
}
input, select, textarea {
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius: 0;
}
You also get this problem in some browsers if you have the following:
<a class="btn btn-primary" href="#" type="button">Link</a>
instead of:
<a class="btn btn-primary" href="#" role="button">Link</a>
This can happen if you change your input element for an anker element and forget to change type to role.
I had this problem on both Chrome and Safari on my IPad.
If you check the form at this link, you'll see that required fields have a class="required" in the CSS and a * in the markup.
http://drupal.org/user
Can the * which shows in the markup be added entirely with CSS for divs that have this class?
You can use the after pseudo class:
.required:after { content: "*"; }
or, because you explicitly asked for a div with that class:
div.required:after { content: "*"; }
Should work (for IE only since IE8)
You can apply any style to this, of course. You can even do things like this:
div.required:after:hover { /* Hello, I'm a geek. */ }
This can also be achieved with JavaScript. jQuery:
$(".required").append("*");
span:after { content:"*"; }
Demo: http://jsfiddle.net/W3gHU/
You can use the :after or before css pseudo element for this, more info, also abt which browsers support it here.
You could add an image of a star via CSS. This should work in all browsers.
.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}
Try this page:
<html>
<style>
.required:after {
color: red;
content: "*"
}
</style>
<body>
<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">
</body>
</html>
:after is understood by probably everything except for IE (hopefully IE9 will have support)
Update taking into account comment of Šime Vidas:
it was just example of using. Of course it would bring more sense if we make it this way:
.required:before {
color: red;
content: "*"
}
....
<div>Name <input type="text" class="required"> </div>
then we can even add unobtrusive javascript validation to that field (so this way brings good advantages). The problem is that this refactored page will be displayed as we want it only in Opera (I checked it on all last builds of browsers, except for FireFox 4, but I'm not sure FF will change the way they take that style into account).
:after and :before do not work for input and img elements; there is related discussion of why. $(".required").before("*") from jQuery however will work everywhere, but that's more about JavaScript then CSS (and was mentioned before by other people).
I am trying to style some form labels by selecting them with their 'for' attribute. But nothing is being picked up when I preview it in IE7. I'm doing this because I'd like to style them differently to each other, without adding to the existing markup.
So if my css looks like the following, I get nothing:
<style>
label[for="foo"] {
background: blue;
padding: 1em
}
</style>
<form>
<label for="foo"/>bar</label>
<input name="foo" type="text"/>
</form>
But if I change it to this, the styling works.
<style>
label[fro="foo"] {
background: blue;
padding: 1em
}
</style>
<form>
<label fro="foo"/>bar</label>
<input name="foo" type="text"/>
</form>
Have you seen this kind of problem before? Is there a problem with the way I'm writing the CSS, IE7, or something else?
This user seems to have had the same problem you are having:
here
He says that because "for" is a reserved word, it can't be used as a property name. But 'htmlFor' is the DOM property name associated with the for attribute
Labels are paired with specific input fields, so is there any reason why you cannot use class instead of creating a multitude of selectors in your CSS for this purpose?