My question is about this image. When i have a placeholder in firefox, the cursor ( the vertical bar when we focus the input) turns black instead of white (my font color). [1st Image, it's not easy to see, but i have focus on "Password" input, and there's the black cursor]
If the input does no have a placeholder the bar is white as it should be. [2nd Image]
Is there anyway i can make that bar white?
Thanks
Edit [Code]:
CSS
input, select {
background-color: #232323;
margin: 3px 0px;
padding: 0px 2px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 11px;
}
HTML
<input type="text" name="username" class="right" /><br/>
<input type="password" name="passord" placeholder="Password" class="right" /><br/>
That's the code i'm using, the objective is to make that vertical bar in the top image [password field] be white.
Sadly, this is a bug in firefox. It's been detected in v15, and should be fixed in v19 (that's why it's marked as fixed at the moment):
https://bugzilla.mozilla.org/show_bug.cgi?id=769405
Nothing you can do but wait I'm afraid...
Related
I want to make the button caption bold. But it should not affect the width of the button. i tried font-weight it changes the width of the button.
<input type="button" style="width:10px" class="buttonEnabled">
<input type="button" style="width:20px" class="buttonEnabled">
.buttonEnabled:hover {
font-weight:bold;
}
If you do not want to fix widths or you have multiple width inputs, then you could simulate a faux bolder text by using text-shadow only on hover.
Use 0 for x and y offsets to make the shadow outline the text. Tweak the color to reduce or increase the impact.
Example Snippet:
.buttonEnabled:hover { text-shadow: 0px 0px 1px #333; }
<input type="button" class="buttonEnabled" value="Submit">
Edit: This works in all modern browsers, but will not work with IE < 10.
For old IE, you could use the shadow filter with standard text-shadow as the last rule. Something like this:
.buttonEnabled:hover {
filter: progid:DXImageTransform.Microsoft.Shadow(
color=#333,direction=0,strength=1
);
text-shadow: 0px 0px 1px #333;
}
I haven't tested it though. You may need to tweak it out. More details of this legacy rule is here: https://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx
You can do this (set a min-width):
CSS
.buttonEnabled{
min-width: 100px;
}
.buttonEnabled:hover {
font-weight:bold;
}
HTML
<input type="button" class="buttonEnabled" value="teste">
DEMO HERE
I have been looking online for days for a way to change the background color for the input box autocomplete drop down list that shows up when you begin typing. Right now I get a drop down list with a gray background and text that is slightly smaller than the input box text.
I want to change the background to white and increase the text size to be the same size as the text in the input box. Here is the code:
input {
width: 485px;
border: 1px solid rgb(150,150,150);
background: white;
background-color: white;
padding: 10px;
font-weight: normal;
font-size: 1em;
}
<form method="get" action="http://www.google.com/search">
<input id="searchBox" type="text" name="q" maxlength="255" value="" autofocus/>
</form>
It is not possible to style the dropdown since it is not part of the DOM, your only option would be to make your own dropdown to be able to style it.
I have a form that the user needs to fill out. The form contains TextInput. The default Adobe Air textboxes are old school styled. I want to modify them so they look more modern. How can I style a textbox so it only has the bottom border line and its fill color is white?
Thanks!
Avi
Shrinivas answer will put a border on the bottom but still shows borders on the side.
If you wanted to hide them you could also color the side borders the same as the background.
On a white background, this will essentially hide the sides and top borders.
Here is the fiddle: http://jsfiddle.net/6swdpe8y/
input{
border-right: white 2px solid;
border-left: white 2px solid;
border-top: white 2px solid;
background: white;
}
<input type='text' />
As stated here (Adobe AIR brings Advanced CSS3 Support to the Desktop), Adobe AIR now supports CSS3.
Also refer this (Manipulating an HTML stylesheet from ActionScript).
Use CSS border.
Check out this fiddle. (bottom border = red)
Here is the snippet.
input,
textarea {
border-bottom: red 2px solid;
background: white;
}
<input type='text' />
<br>
<textarea></textarea>
Check out this fiddle. (only bottom border = red)
Here is the snippet.
input, textarea {
border: none;
border-bottom: red 2px solid;
background: white;
}
<input type='text' /><br>
<textarea></textarea>
I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
I am trying to change the default style of bootstrap checkboxes. I want to add different borders for unchecked, hover and checked. When I try adding a shadow, it works, however border and changing the background color does not work.
input[type="checkbox"]{
width: 20px;
height: 20px;
border: 1px solid #59A29B;
background color: #FFFFFF;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
Example of it not working.
JS Fiddle
Thanks in advance.
Firstly, this is invalid markup:
<input type="checkbox" value="" id="test">
Option one
</input>
This is valid markup:
<label>
<input type="checkbox" value="" id="test" />
Option one
</label>
Secondly, you cannot style checkboxes this way. See How to style checkbox using CSS?
Thirdly, you have some invalid CSS properties. background color should be background-color, but again this will not work (see the link above).
A quick alternative to border here would be to use outline, but this isn't very desirable:
#test{
outline: 1px solid #f00;
}
JSFiddle demo.