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.
Related
This question already has answers here:
Font Awesome icon inside text input element
(25 answers)
Closed 4 years ago.
I have this code where I can add an image inside an input field (it works just fine). However I want to use an Font Awesome icon instead. Can anyone point me in the right direction? Here's what my code looks so far:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('http://iconsetc.com/icons-watermarks/simple-black/bfa/bfa_exclamation/bfa_exclamation_simple-black_512x512.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
NOTE:
I'm trying to use this code: "\f06a" to insert an exclamation font awesome icon
So normally you add FontAwesome Icons either using the class structure such as:
fas fa-exclamation-circle
or you would use the content css style.
content: "\f06a";
The class system relies on the :before pseudo class, which does not work on self-closing HTML elements such as an input or a br tag
The content style also does not work on an input element
What I would do in something like this would be to wrap the input field in a container, add a FontAwesome element as the :after on the element.
<i class="fas fa-exclamation-circle"></i>
and then style my container to look like the input field, while removing some styles from the input field itself such as background color and border. You'll then need to work out the best way to have the FontAwesome icon side beside the form field.
Field HTML:
<form>
<label for="name">Name</label>
<div class="formField">
<input class="valid" type="text" name="name" />
</div>
</form>
Sample Styles
.formField{
border-color: #28a745;
padding-right: 30px;
position: relative;
}
input.valid{
background-color: transparent;
border: 0;
margin-right: 50px;
}
.formField:after{
position: absolute;
transform: translate(0,-50%);
right: 0;
top: 50%;
font-family: "Font Awesome 5 Pro";
content: "\f06a";
}
Depending on what FontAwesome license you have, you might need to change the font-family style to match what you need it to be.
You may need to adjust some of the styles to meet your needs, but this should give you something to start with.
JSFiddle:
https://jsfiddle.net/8jz9ngpu/
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.
With this code (jsbin here) the initial of placeholder text in the password field is pushed to the right, but once you click inside the input padding vanishes and you get correct alignment. What is causing this, and what needs be reset?
Markup:
<input type="text" placeholder="Email"/>
<input type="password" placeholder="Password"/>
CSS:
input {
font-family: monospace;
font-size: 20px;
width: 250px;
}
You can use text-align: left for placeholder pseudo-class to make sure that it's displayed on the web browser correctly at the left.
For the Webkit web browsers (Chromium in this case):
::-webkit-input-placeholder {
text-align: left;
}
I am trying to get the following to display the word "Search" with a border underneath the text itself (not the input window). I attempted to use the CSS placeholder as found here How do I Add border to text in inputfield, but it will not work. Here is my input box (it is a search box for wordpress):
<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />
I would be much obliged to whomever can give me a fix. I know that it is because I have onfocus= and onblur= instead of just placeholder=, but can't seem to figure it out.
Here is my fiddle http://jsfiddle.net/6Gevu/14/
put a css line: text-decoration: underline; when it says 'search' and remove that style when it's something else. Maybe by adding and removing a class (.underline) to the input field.
You can make use of the :after pseudo-element to generate a border, like so: http://jsfiddle.net/RMJWH/
.search-border {
position: relative;
display: inline-block;
}
.search-border:after {
content: ".";
color: transparent;
position: absolute;
bottom: 5px;
left: 2px;
width: 238px;
border-bottom: 2px solid #000000;
}
You could enclose your input box into a div and style that div to look like your input box. Then force the input box to to only show the bottom border.
<div class="input-box"><input type="text" /></div>
.input-box
{
/*your styles here*/
}
input
{
border:0;
border-bottom:/*some value*/
}
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...