Styling the clicked placeholder in CSS [closed] - html

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
When styling a placeholder, we use ::-webkit-input-placeholder, but what if we want to style a placeholder of a clicked input text field?
For an example, http://www.bbc.com/news/uk
the color of placeholder of the search box on the right top in the website is dark gray, but when you click in the search box, the color turns into light gray. Can I know how was that done?

You can use the :focus and ::-webkit-input-placeholder to achieve this. Here is the working demo
HTML
<input type="text" placeholder="My Placeholder" id="myInput">
CSS
#myInput:focus::-webkit-input-placeholder {
color: red;
}

Related

How to change the background color and the font color [closed]

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 10 months ago.
Improve this question
I want to add background color to black and I even want to change the text color to white, P.S I am new to coding please help
You need to use color and background-color
EDIT
You also need to select the elements you want to apply your style, You can check the different selectors and the possibilities.
In the example below, I made a class "text" applyed to a div. Every elements having the class "text" will have a white color and a black background.
.text{
color:white;
background-color:black;
}
<div class="text">
Hello
</div>
<div>
Hello (not affected)
</div>
<div class="text">
Hello
</div>

How to make the text in a text area begin slightly lower? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
My current code is simply:
<textarea
class="form-field-textarea"
id="contact_message"
name="contact[message]"
value=""></textarea>
Basically I am looking to move the text inside the container downwards. Right now it's too high and it interferes with my label. How can I do this?
It sounds like you might have some other CSS and HTML that are affecting your textarea. Without seeing more, this is usually how I manipulate the spacing of a textarea.
This answer may change once more is revealed about the structure regarding the label.
textarea{
padding-top: 2em;
}
<textarea
class="form-field-textarea"
id="contact_message"
name="contact[message]">Hello I am some content.</textarea>

Remove border effect from button [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm trying to remove the blue border from the button which appears every time the button is clicked. No matter what I try it doesn't go. Please see image below for details:
Any info on why this issue occurs?
Add outline: none; to the button.
The solution is pure CSS:
outline: unset;
You might need to add it with the :focus selector and/or :active.
The outline is used by default in a lot of browsers (especially for mobile UX)

How to add a background image attached to a text in a title with HTML and CSS? [closed]

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 4 years ago.
Improve this question
Do you have any idea how to do this with HTML and CSS? Adding an image around a text in a title. See screenshot.
Title with blue background image around a single word:
Is this you want to achive ?
The CSS background properties are used to define the background effects
for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
<p style="margin-right:150px;">Some text with a <span style=";border:1px solid gray;padding:8px;background:#e1efbb url('http://via.placeholder.com/50x50')">background image </span></p>
Good luck

Can you change the colour of <legend>? [closed]

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 4 years ago.
Improve this question
I was wondering if you could change the colour of the line that the tag <legend> makes?
You can do it by changing the border-color of fieldset tag.
CSS code
.fieldset{
border-color: #ff0000; /*color of your choice*/
}
Html code
<fieldset style="border-color:#ff0000">
<legend>Some name:</legend>
</fieldset>