Currently my buttons in a drop down menu are showing a black outline around each of the buttons (as pictured), but I am trying to remove them so that the buttons look more integrated with the background (or alternatively make the outline white) so that you can't see it. This is my current html code
<input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Social</input>
<input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Professional</input>
and this is my CSS code for profiletype
.profiletype {
background-color: white;
font-weight: 300;
letter-spacing: 1px;
color: black;
cursor: pointer;
text-transform: uppercase;
margin: 5px;
text-align: center;
}
and I've attached an image of what it currently looks like. Thanks!:
current image
About that outlining - it is default style for input type="button" applied by the browser. To fix it you can declare your own border style. For example: border:1px solid blue;
.profiletype {
background-color: white;
font-weight: 300;
letter-spacing: 1px;
color: black;
cursor: pointer;
text-transform: uppercase;
margin: 5px;
text-align: center;
border:1px solid blue;
}
<input type="button" class = 'profiletype' name="profile_type" value='Professional' />
<input type="button" class = 'profiletype' name="profile_type" value='Social' />
Related
I have an issue where the cursor/blinker is right in the top left of the textarea with no margin or whatsoever. I don't know what could be causing this, the other inputs are working fine. Here is a screen shot:
I also wanna know how to change that black border color? I would like the border to stay the same when I click on it. I tried using textarea:focus to get rid of it but it's not working.
Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:
HTML:
<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input type="name" placeholder="Name" required />
<input type="surname" placeholder="Surname" required />
</div>
<input type="email" placeholder="Email" required />
<textarea
class="message"
type="message"
placeholder="Message"
row="4"
required
></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>
CSS:
.name-section input {
width: 48%;
margin: 5px;
border: 2px solid white;
padding: 10px;
background-color: transparent;
font-weight: 600;
}
form input {
width: 98%;
margin: 5px;
border: 2px solid white;
padding: 10px;
/* background-color: #000; */
background-color: transparent;
font-weight: 600;
color: white;
font-family: 'Poppins', sans-serif;
}
input::placeholder {
font-family: 'Poppins', sans-serif;
color: white;
font-weight: 600;
}
input:focus {
border: 1px solid white;
}
textarea {
min-height: 100px;
background-color: transparent;
color: white;
font-family: 'Poppins', sans-serif;
width: 98%;
margin: 5px;
border: 2px solid white;
resize: none;
font-weight: 600;
}
textarea::placeholder {
color: white;
padding: 10px;
margin: 10px;
font-weight: 600;
}
Thanks in advance for the help.
You have no padding in your Textaria, try this: remove padding from textarea::placeholder and add padding to .message :
textarea::placeholder {
margin: 10px;
font-weight: 600;
}
.message{
padding:10px;
}
To remove the "black-border-color:
input:focus{
outline:solid 3px blue;
}
I didn't understand what you mean by this: "Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:"
I am currently working on making a website for my startup Virtual Business, and I am trying to make the <input> tag let me download a file.
Current Code, which I have used from other Stack Overflow Posts
<input type="button" value="Download" classs="buyButton"onclick="href='google.com'">
I have all of the CSS laid out, and the button is functional, but just needs to look like the button on the far right Image at this link
Add CSS like this:
.buyButton {
background-color: #C0C0C0;
border: none;
color: white;
padding: 10px 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.buyButton:hover {
background-color: black;
color: white;
}
<input type="button" value="Download" class="buyButton" onclick="location.href='google.com'">
Bootstrap has a variety of different buttons to choose from.
For your button to appear on the far right, use css styling float:right;
https://getbootstrap.com/docs/4.0/components/buttons/
<button type="button" class="btn--download" onclick="location.href='stackoverflow.com'">Download</button
.btn--download {
border-radius: 7px;
box-shadow: none;
color: black;
cursor: pointer;
padding: 10px 15px;
transition: ease .4s background-color, ease .4s color .4s
}
.btn--download:hover {
background-color: black;
color: white;
}
I have a submit button. Initial background color is X. When I hover on the button, background color changes to Y. All fine. But when I click the button, background color changes back to X. I want it to keep color of Y. How can I do it?
#submitStarted {
border: solid 0px;
border-radius: 30px;
color: white;
background-color: #D94C27;
font-family: "Open Sans", Arial;
padding: 14px 30px;
font-weight: 450;
font-size: 15px;
}
#submitStarted:hover {
cursor: pointer;
background-color: #C92A00;
}
<input id="submitStarted" type="submit" value="Get Started">
It's called focus state, you also need to add #submitStarted:focus with #submitStarted:hover to keep same color as hover, but it will be removed after you click out side the button.
#submitStarted {
border: solid 0px;
border-radius: 30px;
color: white;
background-color: #D94C27;
font-family: "Open Sans", Arial;
padding: 14px 30px;
font-weight: 450;
font-size: 15px;
}
#submitStarted:hover,
#submitStarted:focus,
#submitStarted.active {
cursor: pointer;
background-color: #C92A00;
}
<input
id="submitStarted"
type="submit"
value="Get Started"
onclick="this.classList.add('active')">
If you want it to stay the same even after removing focus, you need to play with classes and some JS
onclick="this.classList.add('active')"
This question already has answers here:
Detect if an input has text in it using CSS -- on a page I am visiting and do not control?
(18 answers)
Closed 4 years ago.
Is there a way to change the colour of the submit button when text is entered? Didn't know if this was possible without the use of JavaScript (not a very proficient coder!).
CSS:
#a {
padding: 1px 3px 0px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 0.8px solid #D3D3D3;
width: 300px;
height: 32px;
}
.bttn {
background-color: #FF0783;
border: none;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 24px;
width: 216px;
height: 48px;
border-radius: 38px;
text-transform: none;
}
HTML:
<div style="text-align: center;"><input type="text" id="a" style="text-transform:uppercase; font-family: open-sans, sans-serif; font-style: normal; font-weight: 300; color: black; font-size: 24px; text-align: left;" maxlength="8" autofocus></div>
<div class="sbmt">
<button type="submit" class="bttn">Continue</button>
</div>
Nope this is not possible through CSS. CSS has no (pseudo) selectors for value(s). Possible duplicate of this.
You can use js for change the submit class, or with jquery. Is easy:
$('#id').removeClass('class');
$('#id').addClass('class');
I created a submit button and anchor link with same class name, with same style. But the result is different. My anchor link is bigger than my submit button. Like this
Here's the snippet
.btn {
display: inline-block;
background: red;
margin:10px;
padding: 13px 30px;
border:none;
border-radius: 4px !important;
box-shadow: 0 4px 0 0 blue;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
Login
How to make it have same size? without set the height to exactly px or set the line height of the element. Thanks in advance
on the jsfiddle or sippet have same style, but when I create and run on local browser it's say different thing
Setting a line-height in the .btn class makes them equally tall.
.btn {
line-height: 1em;
display: inline-block;
background: red;
margin:10px;
padding: 13px 30px;
border:none;
border-radius: 4px !important;
box-shadow: 0 4px 0 0 blue;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
Login