I am using https://element.eleme.io/#/en-US/component/radio and I am trying to change the font-size.
Below is my radio button. I want to change the font fize from the default 14px to 20px.
<el-radio-group class="radio-buttons" v-model="choiceOfDelivery" #change="getSelectedItem">
<el-radio-button label="Delivery" name="delivery_choice">
<br>
{{ $t("Delivery") }}
<br><br>
</el-radio-button>
<el-radio-button label="Pick up" name="delivery_choice">
<br>
{{ $t("Pick Up") }}
<br><br>
</el-radio-button>
</el-radio-group>
Below is the section that can change the font size while inspecting elements in Google Chrome.
.el-radio-button__inner {
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: #FFF;
border: 1px solid #DCDFE6;
font-weight: 500;
border-left: 0;
color: #606266;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all .3s cubic-bezier(.645,.045,.355,1);
padding: 12px 20px;
font-size: 20px;
border-radius: 0;
}
However, when I do the same thing in my code, and refresh the page, the css style did not take place.
<style lang="scss" scoped>
.el-radio-button__inner {
font-size: 20px !important!
}
</style>
I am guessing if I am referring to the class correctly, but I couldn't find any examples specifically related to element UI.
Any suggestions? Thank you!
Related
I created a button class named "primary". I noticed that it looks different on a button and on a tag, they have other sizes for example.
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
How can I make the class look the same on both?
JSFIDDLE
With HTML tags, browsers add their own default styles to the tags (yes, it could differ from browser to browser). In your case, there are 2 properties you need to add in the .primary class: 'display: inline-block and font` properties.
As per the JSFiddle you shared. Here is the updated code and screenshot of the both elements height after the primary class code is updated:
.primary{
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
/*font-size: 1.5rem;*/
vertical-align: middle;
border: none;
/* these 2 lines to be added */
display: inline-block;
font: 400 1.5rem Arial;
}
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-family: "Goudy Bookletter 1911", sans-serif;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
This is because a browser already gives HTML elements their own style. You will overwrite this style with your own CSS. But a button will have a different style than an a element by default.
For example the line-height and font-family may be different.
And in your case it seems that display: inline-block will do the trick.
This is because elements inherit default styles, if you want the anchor to look the same simply declare the font family and font-size in your class;
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
font-family: sans-serif;
font-size: 26px;
}
I have a 'Download' button on my HTML webpage and I have set some attributes for it.
Whenever I refresh my page, the button appears like this, very rarely:
Text Outside the Button
But then, it will look like this and this is the normal-looking button:
Normal Button
.navbar-download-btn {
position: absolute;
right: 4%;
top: 5.7%;
color: white;
background-color: blue;
border: 2.2px solid white;
padding: 0.8%;
border-radius: 3.5px;
outline: none;
cursor: pointer;
font-weight: bolder;
font-family: Noto Sans KR, sans-serif;
letter-spacing: 0.7px;
transition: 0.7s;
}
<button class="navbar-download-btn nonindex">Download</button>
I think there might be a problem in the padding of the download button, Increase the padding from the right and also try running this code in other browsers, this had been a problem for me too earlier but sometimes it could just be your browser...
text-align: center;
margin-right:
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Below is my problem, these are the same link and the orange background is a hover effect set in css. As you can see when the window is compressed the text of the link moves onto the next lines to fit the screen. But the background effect of each line obscures the second. I can set the display to be block, but that would stretch the background to 100% of the window, which isn't what I want when the page is not narrow.
Thanks in advance
EDIT: CODE
<div class="PageSection">
<a class="LinkButton" href="">This Is My Link, There Are Many Like It But This One Is Mine</a>
</div>
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
padding: 5px 10px 5px 10px;
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
}
EDIT:
I know I could set the line-height css property, but that gives the link ugly spacing, and I am also aiming for a square block of background colour, just not to the full width of the page.
assuming your padding is for creating that extra block effect.
try
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
/*padding: 5px 0 5px 0;*/
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
background-clip: padding-box;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
box-shadow: 10px 0 0 0px #FF5A19,-10px 0 0 0px #FF5A19;
}
all you need on the link is background-clip: padding-box; on the link and some box-shadow to cover the extra bit where padding can't reach due to inline element behaviour.
Edit: JSFiddle
I think i have managed to do what you wanted, do you want it multi-lined even on full width or when page width is smaller
I have used multiple spans tags to controls the lines
<div class="PageSection">
<a class="LinkButton" href=""><span>This Is My Link, </span> <span> There Are Many Like </span> <span> It But This One Is Mine </span></a>
</div>
here is the fiddle on what i have achieved
I HAVE UPDATED THE FIDDLE to your desired outcome
See the FIDDLE here
.ui_btn , .sub_txt {
margin: 2px 0px 2px 3px;
background:#181c18;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
text-transform:lowercase;
}
.ui_btn input, .sub_txt input , .disabled input{
border-spacing: 0px;
background: none;
color: #fff;
outline:0!important;
margin:0!important;
cursor: pointer;
display: inline-block;
font-weight: bold;
border: 1px solid #181c18;
font-family: Arial, sans-serif;
font-size: 11px;
padding: 7px 6px!important;
white-space: nowrap;
text-transform:lowercase;
line-height: 12px!important;
}
And this is my button:
<label id="SD_mrs_t" class="ui_btn" for="SD_mrs">
<input id="SD_mrs" value="More Specific" type="button"/>
</label>
As a result button in Firefox has something like:
padding: 9px 8px!important;
Is there any solution without definition of special parameters for Mozilla browser?
Firefox applies a special padding to buttons, which you can address like this:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
In Firefox, the input button has more padding, this might help to resolve it:
/* Remove button padding in FF */
button::-moz-focus-inner {
border:0;
padding:0;
}
Also, this question seems more or less the same (above code is suggested there): CSS: Size of buttons in Chrome is different than Firefox
If you use a reset.css in your stylesheet, it can set the default values for all browsers on load, then the firefox button wouldn't be bigger. I use this one:
http://meyerweb.com/eric/tools/css/reset/