I am trying to put link inside a big button. How to make link inside button accessible/readable to voice over
Assuming this is about a button in an HTML document. Do not put a link into a button, use style attributes to make the link look and feel like a button.
Example HTML and css fragments for a Next link appearing as a button
a.schedule_btn:link {
color : #101010;
background-color: #bcc6de;
}
a.schedule_btn:visited {
color : #101010;
background-color: #bcc6de;
}
a.schedule_btn:hover {
color : #ffffff;
background-color: #9ca6be;
}
.schedule_btn {
padding-left : 1em;
padding-right : 1em;
padding-top : 5px;
padding-bottom : 5px;
border : solid 1px;
text-decoration: none;
}
<a href="#HikeSchedule" class="schedule_btn">
Next >
</a>
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
Is it possible to hide the input field in the primeng calendar, and show only the icon? I don't want to change the p-calendar element to inline, but just display the icon that will pop up the calendar.
component.html
<div class="ui-g-12 ui-md-4">
<p-calendar class="foo-cal" appendTo="body" readonlyInput="true" dateFormat="yy/mm/dd" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>
I tried the following, but no success:
body .ui-calendar.ui-calendar-w-btn .ui-inputtext {
display: none !important;
}
p-calendar span input {
display: none !important;
}
However, with the devtools in the browser if I add the display: none; property to the element, it will hide leaving the icon only. Any ideas how can I make this to render the html file without the input field?
You just need to create a custom style for the p-calendar component
<div class="ui-g-12 ui-md-4">
<h3>Icon</h3>
<p-calendar styleClass="only-icon" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>
style.scss
.only-icon {
.ui-inputtext{
display: none;
}
button.ui-datepicker-trigger.ui-calendar-button {
border-radius: 4px !important;
}
}
demo ⚡⚡
apply this style to all componnt without any custome class
p-calendar {
.ui-inputtext{
display: none;
}
button.ui-datepicker-trigger.ui-calendar-button {
border-radius: 4px !important;
}
}
the style above gone to apply to a p-calendar to all project.
I think if you set display none for input , users can't see calendar when click in there but you can use this css code for input and show your icon as image in background-image.
input{
border: none;
background-image: url(your-icon-address);
color: transparent;
text-shadow: 0 0 0 #fff;
cursor:pointer;
/*width:somthing; if you need*/
/*height:somthing; if you need*/
}
input:focus{
outline:0;
}
you can set width and height input same as icon.
Want button on dark-blue background with white text
code in xxx.vue
<b-dropdown text="user" right variant="blue" class="signout-button">
<b-dropdown-item #click="toMain()">sign out</b-dropdown-item>
</b-dropdown>
and style is
.bg-blue {
}
.signout-button {
border-radius: 10px;
color: white !important;
background-color: #183450;
border-color: #183450;
border-style: solid;
}
the result look like this
it still back text
For example should do the job, as b-dropdown will generate that button tag inside.
.signout-button button{
color: red;
}
Well, you need styling on the <b-dropdown> compiles it converts to button tag.
.signout-button button {
color: green;
}
Here is working Jsfiddle
Hope this helps!
I am trying to add custom css style to my caldera forms on a wordpress website.
what i am trying to achieve is to add a hover style to my fields of radio checklist
Right now i was only able to add style to the bullets ,I am currently stuck with adding a hover style to the fields
this is the link to the form
https://purdywordy.com/order-here/
This is the CSS that i have used
.caldera-grid input[type=checkbox]:hover,
.caldera-grid input[type=radio]:hover {
cursor: pointer;
}
input[type=radio]:before,
input[type=checkbox]:before {
font-family: FontAwesome !important;
font-size: px;
}
input[type=radio]:before {
content: '\f111';
border-radius: 50%;
padding: 0px 15px 0px 0px;
}
input[type=checkbox]:before {
content: '\f14a';
color: red;
background: red;
border-radius: 3px;
padding: 2px;
}
input[type=radio]:checked:before {
color: red;
}
When inspected, your form (HTML) is structured like this:
<div class="radio">
<label>
<input type="radio">
</label>
</div>
Since you have used nested input inside of a label, you don't even need for/id attributes, but I am guessing that is automatically generated by the form. Btw, do you have control over the structure of HTML or the proposed form simply spits it out?
For your current structure, you could style it like this:
.radio:hover > label {
/* add the style for the label */
}
.radio:hover input[type="radio"] {
/* add the style for the radio button */
}
Whatever you need to apply the style to, "listen" for a hover on the parent and then target its direct children. You get the point.
EDIT: My bad. I have said that input is nested inside of label. Therefore, radio:hover > input will not target it. Omit the > and it will target any input inside div with the class .radio. Sorry for the possible confusion. You can learn more about CSS selectors and differences between them here.
This should work. Your radio buttons and labels sit inside a class of 'radio'. You can remove the .form-group reference here unless there are other places on the page that you don't want this styling to apply to.
.form-group .radio:hover {
cursor: pointer;
background-color: grey;
border: 2px solid blue;
border-radius: 5px;
// other hover properties
}
I want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.