My first background image for the form fields works, but the second one for the submit button is doing nothing, & the button is using the style of the fields.
My CSS is this:
form input {
background: url("images/text-field1.png") no-repeat scroll -5px 0 transparent;
font-size: 1em;
height: 17px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
width: 311px;
margin-bottom: 5px;
margin-left: 40px;
}
form input .button1 {
background: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent;
}
button1 is a class that only styles the button, but for some reason it is not styling it.
Try below code.
I have given button class name mybtn and applied background-image style.
HTML
<input type="submit" name="submit" class="mybtn"/>
CSS
input.mybtn {
background-image: url("http://subtlepatterns.com/patterns/symphony.png");
font-size: 12px;
padding: 10px;
}
JSFIDDLE DEMO
You need to add !important
otherwise, the base class, which uses !important on it's default EMPTY background-image property will override you.
you will need something like
background-image: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent !important;
Related
Ive used the CSS :after selector to create an arrow for my links. This works fine but now I want to do the same thing to form inputs.
If I use the same class on the submit button then the :after is ignored, im assuming because the element cant contain other other elements.
If I apply the class to a div containing the submit button then it looks fine, but the arrow and padding outside of the actual submit button isnt clickable.
Is there a solution to this?
http://jsfiddle.net/jn7Vj/5/
.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
.button-style input {
background: none;
border: none;
color: white;
font-size: 12px;
margin: 0;
padding: 0;
}
Here is a link
<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">
<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">
<input type="submit" class="button-style" value="Submit">
<div class="button-style">
<input type="submit" value="Submit">
</div>
</form>
The CSS after pseudo element doesn't work on input fields (https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work). Unfortunately your only solution here is to add the triangle as a background image on the input field or surround the field with something like a div or a span and add the after selector to that element.
As for your button, I would suggest changing it from an input element to a button, you can then apply the after selector to that.
EDIT
After reading your question again, I'm not sure if you want to add the triangle to your text input but here is a jsFiddle with the style added only to the buttons: http://jsfiddle.net/jn7Vj/9/
add for .button-style position:relative; padding: 0;
add for .button-style input padding: 0.7em 2em 0.7em 1em; --> you can change this sizes, main idea is move padding from .button-style to .button-style input
add next css-rules for .button-style:after
position:absolute;
top:50%;
right:10%;
margin: -0.2em 0 0 0;
I am using AjaxControlToolkit's ComboBox control. The DropDown arrow appears quite far from the actual position where it should be. See this image:
How to fix this to make it appear like an ideal DropDownList?
If the image doesn't appear, click this link: http://postimage.org/image/99yqullkb/
**** Edited (CSS Code) ****
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
padding: 0px 0px 1px 0px;
border: solid 1px #7F9DB9;
border-right: 0px none;
font-size: 13px;
height: 18px;
width:200px;
}
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
padding: 0px 0px 10px 0px;
height: 21px;
width: 21px;
}
.WindowsStyle .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
Looks like a CSS styles side-effect. Check calculated styles for arrow button and it's container with some tool like FireBug or Developer Tools.
IAE try to apply the style rule below, maybe it fix the issue:
table.ajax__combobox_inputcontainer td
{
padding: 0 !important;
text-align: left !important;
}
table.ajax__combobox_inputcontainer td.ajax__combobox_buttoncontainer button
{
margin-left: 0 !important;
}
If you are using width property like width="20%" then this problem occurs. Avoid "%" in width property and try with exact width in pixels like width="200px".
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
There's a screen grab of the bit I am referring to here:
This is now documented by google: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
This CSS will allow the drop-down to resize to fit the width of the results:
.pac-container, .pac-item {
width: inherit !important;
}
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
Though we know that the container has the .pac-container class and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
This worked for me, and now I can run this on mobile!
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
To force the box to stay open for much easier styling and inspection from dev tools you can set the input value from the JS console and the container will stay open when inspecting from the dev tools.
Simply run document.querySelector('.pac-target-input').value = 'CB' in the console on your page with the input, then go back to the Elements tab and you can now individually inspect each element.
This gets around the issue where it always closes when focus is lost.
if you want to create your custom html & css then AutocompleteService class is also available which will provide all data in json.
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
{ input: "provide location string here for search" },
(suggestions) => console.log(suggestions)
);
For easier debugging and styling. to keep the dropdown open.
use the following code in chrome console.
document.querySelector('.pac-container').style.display = 'block'
Also used following classes to style the suggested dropdown in google places auto complete
Update icons
.pac-icon {
background-image: url('./assets/locationMark.svg') !important;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 14px 18px;
}
Update text
.pac-item-query {
font-size: 16px
}
Hide google logo
.pac-logo {
padding: 10px 0;
&::after {
display: none;
}
}
I've got a problem in Google chrome where the placeholder text sits too high on my website
http://www.myinvestmentdecision.com.au
Click "Feedback" and you'll see the text in the placeholder sits to high. I've got a placeholder script, but it turns off when it realises that chrome has support for placeholder.
Just to proove that point here's a jsfiddle of the form itself: http://jsfiddle.net/RAANa/
Must be a CSS thing. Any ideas?
Remove line-height:28px from your css below.
.form input[type="text"], .form input.text, .form .calculate_box .calc {
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #A1A1A1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width: 284px;
}
See attached screenshot with line-height removed
I think your line-hight:28 from here: (form.css)
.form { font-family: arial, sans-serif; }
.form input[type=text],
.form input.text,
.form .calculate_box .calc{
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #a1a1a1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width:284px;
}
Is causing the problem. Remember that this declaration applies to the content of the tag, as well as the tag itself. This can get you when it comes to forms..
Not sure if this is the "right" way to do it, but adding a padding of 5px to the input field would center the placeholder for the email field.
Just add this to your CSS wherever it applies to that email field:
padding: 5px;
I have a webpage that is using third-party HTML that I cannot change. I can however edit the CSS style sheet. I have a "sliding-doors" style button that I want to swap for the default input button on the page, but I cannot figure how to do so using only CSS.
Here is the HTML of the button:
<div>
<input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>
And here is the CSS of an existing button that I have which uses the "sliding-doors" method:
.clear {
/* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button_oval {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
color: #222;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button_oval span {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button_oval:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
You need two elements to do nested background joining (aka sliding doors): an outer (background) one and an inner (foreground, containing the end-piece of the background image). If you only have a standalone <input> you're stuck.
If you can find a way to select the <div> you mentioned, you could use that as the outer element, with the button (with its natural background colour removed) as the inner. You would have to make sure the outer div was the same width/height as the inner <input>, though, perhaps by floating it left (to activate the ‘shrink-to-fit’ behaviour that comes with floats). You would also need to account for the top margin on the button, and any padding on it.
#something div {
float: left;
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px;
}
#something div input {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
border: none;
padding: 0;
}
However, as the button in question has a fixed-pixel on-page size, you don't really need to use nested backgrounds at all. You can just make one background of the right dimensons for the button.
If you are able to use the button element instead of the input element.
The following articles are quite useful.
http://jedisthlm.com/2008/03/27/flexible-css-buttons/
http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/
You can still use type submit and post like an input does
However, if you are relying on using this button as a submit, just beware that when using IE. it will submit the contents of the button also which will give a security exception for .net web apps.
*Edit, found a different link as original no longer works
Your only other option would be to use javascript to dynamically insert the ...my button text... tags typically used for sliding doors buttons. However this is not recommended as it will not work with JS disabled.