Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
I've p-dropdown, and i need to make its placeholder to going up, when i choose one of the sort options, like on screenshots. Is there any way to achieve it with p-dropdow? Cause when i just add placeholder="Sort by" to p-dropdown, it disappears, when i choose sort options
You can do this with raw html and css as follows. You might be able to adapt it to suit your needs.
.input-container {
display: inline-block;
padding: 0.5rem 0.5rem;
position: relative;
border-radius: 0.25rem;
border: 1px solid lightgray;
}
.input-container>label {
display: none;
font-size: 0.6rem;
position: absolute;
background-color: white;
left: 0.5rem;
top: -0.4rem;
padding-inline: 0.25rem;
}
.input-container:focus-within {
border: 1px solid blue;
box-shadow: 0px 0px 8px 0px #0000ff;
}
.input-container:focus-within>label {
display: inline-block;
}
.input-container:focus-within input::placeholder {
opacity: 0;
}
.input-container>input {
outline: none;
border: none;
}
<div class=input-container><label id='placeholder-text' for='cats'>Choose a cat</label>
<input id='cats' placeholder='Choose a cat' type="text" list="catoptions" />
<datalist id="catoptions">
<option>Tiger</option>
<option>Lion</option>
<option>Jaguar</option>
<option>Kitten</option>
</datalist>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed yesterday.
Improve this question
I have tried multiple ways, but I’ve been running into issues attempting to make a container with diamond shaped edges on either side with the corner rounded, as well as another one with the diamond shape inverted. Similar to my sketch:
Optimally, the solution would only need HTML & CSS, with a different color border and fill. I would definitely be open to alternative solutions if that would include SVG, for example.
Thanks!
I have tried to create a mask with SVGs, but I could not find a way to add a border and a separate fill, as well as containing text inside it, and there were scale issues too (I’d like it only to scale horizontally, not vertically when width changes.)
You can achieve this using the ::before and ::after psuedo-elements in CSS relatively easily. The second one (with non-inverted triangles) is slightly less verbose than the first example, but both are achievable using a single HTML element and some creative CSS.
Please note that you might need to modify some of the pixel dimensions to suit your needs, but the following should achieve what you need:
.label {
background: red;
border: 2px solid #000;
color: #fff;
display: inline-block;
font-family: sans-serif;
margin: 0 30px;
padding: 10px 50px;
position: relative;
text-transform: uppercase;
}
.label::before,
.label::after {
aspect-ratio: 1/1;
background-color: #fff;
border: 2px solid #000;
content: '';
display: block;
height: 28px;
position: absolute;
overflow: hidden;
transform: rotate(45deg);
top: 4px;
}
.label::before {
border-bottom: none;
border-left: none;
left: -16px;
}
.label::after {
border-top: none;
border-right: none;
right: -16px;
}
.label--inverse::before,
.label--inverse::after {
background: inherit;
border: inherit;
}
.label--inverse::before {
border-top: none;
border-right: none;
left: -17px;
}
.label--inverse::after {
border-left: none;
border-bottom: none;
right: -17px;
}
<span class="label">Text</span>
<span class="label label--inverse">Text</span>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 12 months ago.
Improve this question
I need to make a input box like the image below.
I'm using materialize and CSS.
You can try to use fieldset in your form element.
<fieldset>
<legend>
<label for="username">Username</label>
</legend>
<input type="text" id="username" name="username">
</fieldset>
After that, you can try to edit your styling in your css. Probably to take out the border of the input and change the width of the box.
Basic demonstration using :before.
input {
border: transparent;
text-align: left;
}
input::placeholder {
text-align: center;
}
input:focus {
outline: transparent;
}
.line {
border: 1px solid black;
border-radius: 5px;
width: fit-content;
padding: 10px 0px 5px 0px;
}
.line:before {
content: "username";
position: absolute;
top: 0;
left: 20px;
background-color: white;
padding: 0 2px;
}
<div class="line">
<input type="text" placeholder="me#example.com">
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to hide my .dwBtn class button on hover, using the code below, but it's not working.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
display: none;
}
<button class="dwBtn">Test</button>
I've searched on Google and on StackOverflow but cannot find a solution. I have tried changing the opacity, like so:
opacity: 0;
But it still isn't doing anything as far as I can see. It looks as if there was a typo somewhere, but I can't find it.
When the element isn't displayed, you can't hover it, so the rule stops applying, so it springs back immediately.
Using opacity as you suggested will work, it just didn't seem to because of typo you have since fixed.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
opacity: 0;
}
<button class="dwBtn">Test</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is an image of a browse button for uploading file. I want to craete a browse button like in this image. How can I do that?
Here's how you do it! Steps:
We use <input type=file> for uploading files. But we don't actually display it.
We use our own customized button and redirect all clicks to our <input type=file>.
Every time our <input type=file> changes its value, we display it in our span.
We style our file browser form to anything we like.
The following were made similar to the image, as close as possible.
.browse-field {
position: relative;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 15px;
color: #999;
border-radius: 5px;
border: 1px solid #CACACA;
background-image: linear-gradient(rgba(0,0,0,0.15), transparent 13%);
}
.browse-field>input[type=file] { display: none; }
.browse-field .file {
display: inline-block;
margin: 0 0 0 0.8em;
min-width: 25ch; /* Modify as needed! */
}
.browse-field .btn {
margin: 6px 9px;
padding: 5px 14px;
outline: none;
border: none;
border-radius: 4px;
background: #CACACA;
color: #FFF;
font: inherit;
}
/* Modify the following styles as desired */
.browse-field .btn:hover { background: #DADADA; }
.browse-field .btn:active { background: #CACACA; }
.browse-field .btn:focus { box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$(".browse-field>input[type=file]").each(function(){
var inpfile = $(this);
inpfile.change(function(){
inpfile.siblings(".file").text(this.value)
})
inpfile.siblings(".btn").click(function(){
inpfile.click();
})
})
})
</script>
<div class=browse-field>
<input type=file>
<span class=file>No file selected.</span>
<button class=btn>Browse</button>
</div>
Check out this website: http://css3buttongenerator.com
It will help you creating a Button like in your link.
I think do you need this. Chick it out on : click
<div>
<form>
<input type="text" name=""/>
<input type="submit" value="Submit" class="button"/>
</form>
</div>
Css
form input {
border:0px;
margin:0px;
padding:0px;
}
form .button{
padding:5px;
border-radius:3px;
}
div {
border:1px solid #B2B2B2;
border-radius:3px;
width:33%;
height:auto;
padding:5px;
}