Here is my CSS
button {
border: 0 none;
cursor: pointer;
padding: 0 15px 0 0;
text-align: center;
height: 30px;
line-height: 30px;
width: auto;
}
button a {
color:white;
text-decoration:none;
}
button.rounded {
background: transparent url(/images/button/btn_right.png) no-repeat scroll right top;
clear: left;
font-size: 0.8em;
}
button span {
display: block;
padding: 0 0 0 15px;
position: relative;
white-space: nowrap;
height: 30px;
line-height: 30px;
}
button.rounded span {
background: transparent url(/images/button/btn_left.png) no-repeat scroll left top;
color: #FFFFFF;
}
button.rounded:hover {
background-position: 100% -30px;
}
button.rounded:hover span {
background-position: 0% -30px;
}
button::-moz-focus-inner {
border: none;
}
Here is the code for my "button" with a link in it.
<button class="rounded"><span>Profile</span></button>
The issue is it does not link to the href when i click on it.
Anyone know why?
Incidentally, it's not a CSS problem. It's a "i don't understand buttons" problem:
http://www.w3schools.com/tags/tag_button.asp
A button can have "submit", "button" or "reset" actions. If you are using the "button" action you should provide the javascript necessary in the OnClick event to navigate to the page in question.
I believe button needs a type and value attribute.
http://www.w3schools.com/tags/tag_button.asp
You can also add onclick like:
<button onclick="location.href='/profile.php';">Profile</button>
But, since its just a regular link, you'll have a easier time using the <a> tag and styling it with CSS.
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I wanted to try and create a bigger input and submit button box for a simple JS function for my course. However, when I changed the height and font size of my input my submit button no longer functions. I know it has to do with the height because when I remove it, it works. How can I work around this?
I will provide the URL for my website my CSS code that starts the input and the button is on line 273.
http://web.gccaz.edu/~pet2153867/test/
Thanks!
Add position: relative; and z-index:9999; to your button style.
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
height: 50px;
position: relative;
z-index: 99999;
}
this problem caused by H1 Tag. h1 tag crosspvered with your button. removing bottom:70px will also fix your problem.
#projects h1 {
position: relative;
bottom: 70px;
}
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
Here is my code, which works perfectly in all but ie! The active simply does not fire
a.Button span {
background: transparent url('images/form_sprite.png') no-repeat 0 0;
display: block;
height:45px;
line-height: 30px;
padding: 7px 0 5px 20px;
color: #fff;
background-position: 0 -44px;
}
a.Button {
background: transparent url('images/form_sprite.png') no-repeat top right;
display: block;
float: left;
height: 45px;
margin-right: 6px;
padding-right: 27px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.Button:hover span {
background-position: 0 -136px;
}
a.Button:hover {
background-position: right -90px;
}
a.Button:active span {
background-position: 0 -225px;
}
a.Button:active {
background-position: right -181px;
}
This is the html:
<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div>
Any ideas please?
try changing a.Button:active to a.Button span:active in your css. That seems to be firing the :active css and still works in chrome for me.
Yep, the :active psuedo-class only fires in IE when the user is clicking directly on that object. In this case, the link. If you're clicking on a child object (the span), the link's active event won't fire.
You can, as Aninemity said, apply the style to span:active (the proper way to do this). But in IE6/7, :active fires only for links. If you need IE6/7 support, you'll have to find some way to get rid of the span.
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;
}
}