I'm new to HTML and CSS. I have a default button working well in HTML, but I would like to change its appearance without changing its functionality at all.
This is my code in HTML:
<a><input type="submit" class="save btn boton-no" value= "HECHO"><a/>
And this one is the style I would like the button to have, is my CSS file:
#boton-no{
color: #AF1C24;
font-family: "Roboto";
font-size: 30pt;
text-align: center;
border: 1px solid;
border-radius: 10px;
width: 25%;
padding-right: 40px;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 35%;
margin-right: 35%;
}
How can I apply this style to my button? I've tried several things like changing the "id", the "style", ... but the button doesn't change its appearance or it changes both its style and functionality...
Could you help me, please?? Thank you very much!!
You can do this with simplified CSS. Also the hashtag symbol targets ids, not classes.
#boton-no{
color: #AF1C24;
font-family: "Roboto";
font-size: 40pt;
border: 1px solid;
border-radius: 10px;
padding: 20px 40px;
display: block;
margin: 0 auto;
}
<input type="submit" class="save btn" id="boton-no" value= "HECHO" />
The selector #boton-no applies to an element with id=boton-no. You should be using class sector, which look like this: .boton-no. The style is applied to all elements which have the button-no class. So your CSS should be looking like this:
.boton-no {
color: #AF1C24;
font-family: "Roboto";
font-size: 30pt;
text-align: center;
border: 1px solid;
border-radius: 10px;
width: 25%;
padding-right: 40px;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 35%;
margin-right: 35%;
}
You can read more about CSS selectors here.
Related
i have a form page and it contains few drop-downs, upload and input text fields(for demo i am showing only few elements). i have a change mode button after the attack type dropdown its functionality is not mentioned but while zooming in zoom out that change mode button not maintaining alignment with other elements.
I tried with margin-left in pixes, percentile, and position: absolute, fixed but not working
Please help me with this issue.
This is My HTML Code:
<html>
<head>
<style>
label {
display: inline-block;
margin-left: 30px;
width: 22%;
font-family: Helvetica;
font-weight: bold;
font-size: 12px;
padding: 5px;
}
#attackType {
width: 158px;
border: none;
height: 30px;
background-color: #A9A9A9BF;
border-radius: 2px;
}
#changeCustomPcapModeDiv {
margin-left: 550px;
height: 29px;
margin-top: -29px;
border: none;
border-radius: 3px;
background-color: #A9A9A9BF;
}
#customPcap {
width: 200px !important;
}
.error {
color: red;
}
#attackConfigBtn,
#cancelBtn {
width: 80px;
height: 30px;
padding-top: 4px;
border: none;
background-color: #A9A9A9BF;
border-radius: 3px;
}
#attackConfigBtn {
margin-left: 25%;
font-family: Helvetica;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
#cancelBtn {
width: 70px;
margin-left: 3%;
font-family: Helvetica;
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<label>Attack Type:</label>
<select name="attackType" id="attackType">
<option value="attack_list">Attack List</option>
<option value="custom_pcap">Custom PCAP</option>
</select>
<button id="changeCustomPcapModeDiv" style="display: block;">Change Mode</button>
</div>
<div style="margin-top: 10px; display: block;" id="customDiv">
<label>Custom PCAP Uplaod: </label>
<input type="file" name="customPcap" id="customPcap" accept=".pcap" data-max-size="102400"><span id="customPcapErr" class="error" style="margin-left:35px;font-size:14px;"></span>
</div>
<input id="attackConfigBtn" type="button" value="Apply" title="Apply new configuration">
<button id="cancelBtn" onclick="window.location = 'index.php'" title="Ignore configurations changes">Cancel</button>
</body>
</html>
and these are the images of my Sample page:
Please help me since i am new to HTML
Thanks
I have this button which doesn't highlight properly when I click on it, please see the image, and CSS file down below
CSS for the toggle button:
.mat-button-toggle {
box-sizing: border-box;
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border: 1px #000 solid !important;
background-color: #FFF !important;
border-radius: 5px !important;
}
CSS for the text
.ticket {
margin-top: 5px;;
height: 18px;
width: 122px;
color: #111111;
font-family: Arial;
font-size: 16px;
letter-spacing: 0;
line-height: 18px;
}
HTML
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" >
<mat-button-toggle routerLink="ticketView" value="ticketView">
<div class="ticket" id="p1">
{{'TicketOverView' | translate}}
</div>
</mat-button-toggle>
My guess is there is something else in your css html going on. I have recreated your css in codepen for you and couldn't reproduce your results.
I would double check your html markup.
Here is the codepen I produced
https://codepen.io/jmllr89/pen/KKdzLGw
Also you do not need !important on the :hover pseudo-class. CSS is smart enough to recognize what needs to be changed. So simply define your initial state in mat-button-toggle and then in mat-button-toggle:hover you create a second state, and css will make the necessary changes.
.mat-button-toggle {
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border-color: #000;
border-radius: 5px;
}
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 6 years ago.
I've a text area in my html, and this has rounded edges. but when I click inside the text area, it is showing a rectangle around the rounded edges.
Below is my HTML.
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
and here is my CSS
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
}
working fiddle https://jsfiddle.net/jrss9192/1/
Just remove the outline
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: 0;
}
The rectangle that you are seeing is a browser-default outline. While its not a good idea to remove browser default styles, it can be done by declaring outline: none;
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
Use: outline: none when the textarea is focused
textarea:focus{
outline: none;
}
That's outline of textarea appears on focus just set outline:0; on .Textareausermsg
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline:0;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>
The rectangled area is called "outline" and it's a css property.
Try add outline: none; in your css code to remove it.
If you want a "blue border" when you click / focus the element, try this
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg:focus, .Textareausermsg:active {
border:1px solid blue;
}
https://jsfiddle.net/jrss9192/2/
Here is the solution to your question.
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg :active , .Textareausermsg :focus { outline:none}
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/
I have a select tag in a div, I want to replace its "combobox drop down item" with an image that I have designed. Is there a pure css way to do it?
The codes I have for it are as follows:
<div id="country">
<select>
<option> Country:</option>
<option>xxx</option>
<option>yyy</option>
<option>zzz</option>
</select>
<div>
and a css selector as follows:
#country select {
margin-left: 8px;
margin-bottom:1px;
border: thin solid #152635;
width: 528px;
height: 42px;
font-family: verdana;
font-size: 14px;
padding-left: 10px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
font-weight: bold;
background-color: #152635;
border-radius: 6px;
font-weight: bold;
color: #FFFFFF;
opacity: .7;
}