I have a form with an input field. While the input field comes in front, the text cursor seems to go behind. I have tried various Z-index combinations, which don't help, as the object is already in front. How do I get the cursor in front? I know I'm doing something trivially wrong, but I'm not able to place it
Code snippet:
.searchBox {
background-color: #7e7e7e;
border: medium none;
color: #fff;
font-family: arial;
font-size: 12px;
font-style: italic;
font-weight: 600;
height: 24px;
padding-left: 10px;
position: absolute;
width: 38.7%;
z-index: 3000;
}
.searchIconBox {
background-color: #7e7e7e;
height: 24px;
margin-top: 0;
padding-left: 5px;
padding-top: 3px;
width: 5%;
}
<div style="width:49%;">
<form style="width:94%;" class="pull-left">
<input type="text" class="searchBox" placeholder="Search"></input>
</form>
<div class="pull-right searchIconBox">
<asset:image src="search.png" />
</div>
</div>
The cursor isn't going behind. It is camouflaging with the color #7e7e7e
Try giving the color of
.searchBox{
background-color: yellow;
}
and then hover the cursor, you will see it is visible
It's working fine for me, there just isn't a convenient color for the cursor to change to with the gray of the search box.
Try something like...
.searchBox{background-color:#d0d0d0;}
and your cursor will be much more visible.
You need to add more padding-left in .searchBox because cursor can starts after the icon:
.searchBox { padding-left: 25px; }
If you need that searchBox doesn't expand to right, add box-sizing
.searchBox { padding-left: 25px; box-sizing : border-box; }
Related
I am new to css/html and want to know the css style for the input control of type number. I am getting the default style(two arrows one in one column) with the following code.
<input type="number" placeholder="0">
Default Style:
But i want the css style for the image given below(Highlighted with red circle).
I know with the similar question asked previously
Customize appearance of up/down arrows in HTML number inputs
here it gives the following spin control which i don't want.
My requirement is very specific to the 2nd image which i have attached.
Yes, you can (webkit only I assume):
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
See JSFiddle method 1
See JSFiddle method 2
Reference
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I have a div which contains some text and a button.
When I click on the button, it disappears based on a criteria which is controlled by an ng-if, but this causes the text to move up a couple of px!
I can't seem to make it stay in the same spot. Any ideas?
Here is what the HTML looks like:
<div class="review-helpful">
<span ng-if="showThis">Howdy there partner!</span>
<span ng-if="!showThis">How they hanging?</span>
<button ng-if="showThis" type="button" class="btn btn-default btn-helpful" ng-click="setShowThis(false)">Yes</button>
</div>
And here is the CSS:
.review-helpful {
margin-top: 5px;
min-height: 23px;
font-size: 12px;
color: #696969;
}
.btn-helpful {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
}
I've hooked up a plnkr to show the exact problem: http://plnkr.co/edit/9FqzhB3NJXHHnHtdfVvB
The height of the button is greater than the height of the text in the span.
There are probably a million ways to solve it. One way is using the line-height style:
.review-helpful {
margin-top: 5px;
min-height: 23px;
font-size: 12px;
color: #696969;
line-height: 24px;
}
I have a problem with IE & firefox. I believe the effect I wanted to achieve works only on chrome.
The problem is that it displays the dropdown perfectly in chrome like on this picture below:
and in firefox / ie it displays it in this way:
So, basically it keeps the default dropdown arrow.
here is a code:
<select name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
and css:
input {
height: 67px;
width: 400px;
border:none;
background:url(../_images/butt-reg.png) no-repeat;
padding: 0 20px;
margin: 0 10px 20px 10px;
text-align:left;
vertical-align: middle;
font-size: 18pt;
color: #666;
I'm sure there is a simple solution to sort it out, but i tried couple of things and nothing was working.
Thank you in advance.
Take a look at Style a Select Box Using Only CSS
Look here: http://result.dabblet.com/gist/3358882/5eeb2b8d4fe6adf243c5c463111d367c7651a029
I have tried to overlay the dropdown button with a custom one by using the after-pseudo-element on the parent node (a label-element in this case). The CSS property pointer-events makes sure that you can still click on the pink button to open the select-control.
Doing this cross-browser using CSS only is real hard (if not impossible) to do. The only way I can think of to style your <select> element is to simulate it. First, insert a hidden text input that'll have the selected value. Here's an example HTML that simulates a dropdown-select element:
<div class = "select">
<div class = "curVal">Gender</div><div class = "arrow">V</div>
<div class = "choices">
<div class = "choice">Male</div>
<div class = "choice">Female</div>
<div class = "choice">Refuse to answer</div>
</div>
</div>
Let's style it:
body {
font-family: 'Arial', Helvetica, Sans-Serif;
}
.select div {
display: inline-block;
}
.curVal {
height: 30px;
width: 150px;
line-height: 30px;
vertical-align: middle;
background-color: rgb(0, 162, 232);
color: white;
}
.arrow {
color: white;
background-color: rgb(0, 140, 200); /* this can be an image */
cursor: pointer;
height: 30px;
line-height: 30px;
vertical-align: middle;
position: absolute;
top: 0px;
}
.choices {
position: absolute;
left: 0px;
top: 30px;
background-color: rgb(255, 127, 39);
color: white;
padding: 3px 3px 3px 3px;
width: 150px;
}
.choices div {
display: block;
cursor: pointer;
}
Some jQuery:
$(document).ready()(function(){
$(".choices").hide();
});
$(".arrow").click(function(event) {
$(".choices").slideToggle("fast");
event.stopPropagation();
});
$(".choice").click(function() {
$(".curVal").html($(this).html());
$(".choices").slideToggle("fast");
event.stopPropagation();
});
$("html").click(function() {
$(".choices").slideUp("fast");
});
Put them all together, you get this: jsFiddle.
I hope that helped you in any manner!
I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO